無効に接辞

Question

こんにちは私はサイドバーを作ったし、その親にその幅の相対を更新autoにいくつかのJavaScriptを使用しているが、今、私は窓は、私が考えるこれ（750px以下になるたび、自動完全接辞を削除したいですブートストラップのタブレットブレークポイントです）。

私は別のページにこのコードを見つけましたが、私はそれが私のページ上で動作するように取得することはできません（ところで、私はJavaのコーディングの偉大な知識を持っていない）

<script> 
if ($(.container).first().innerWidth() > 750) 
    $(#sidebar).affix({}) 
</script> 

これは

私のサイトです

<div class="container"> 
        <div class="row"> 
      <div class="col-sm-3"> 
       <div id="sidebar"> 
        <div class="row"> 
         <div class="about text-center page-header"> 
          <img src="images/me.jpg" class="img-circle" width="100px"> 
          <h3>Indiana Porter</h3> 
          <small>Subtitle</small> 
         </div> 
         <div class="posts page-header"> 
          <h4 style="padding-left:15px;"><strong>Recent Posts</strong></h4> 
          <div id="posts"> 
           <ul class="nav nav-tabs nav-stacked"> 
            <li class="active"><a href="#310320161" class="page-scroll">Back to the future day</a></li> 
            <li><a href="#310320162" class="page-scroll">How about something spacey</a></li> 
            <li><a href="#310320163" class="page-scroll">A little bit of compositing</a></li> 
           </ul> 
          </div> 
          <br> 
         </div> 
         <div class="col-md-12 text-center"> 
          <button type="button" class="btn btn-default" data-toggle="modal" data-target="#feedback">Email me</button> 
         </div> 
        </div> 
       </div> 
      </div> 



      <div class="col-sm-9"> 



       <div class="row" id="310320161"> 
        <div class="col-md-12 page-header"> 
         <p><img src="images/bttf.jpg" class="img-responsive"></p> 
         <h2>Back to the future day<br><small>31/01/2016</small></h2> 
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet lorem auctor risus interdum, a gravida ligula iaculis. Donec sodales leo et nunc fringilla, eu gravida tellus porttitor. Ut at lorem tortor. Pellentesque at magna leo. Nullam venenatis varius nisl, sed convallis mauris tempus eu. Sed feugiat dignissim convallis. Pellentesque at lobortis libero, sit amet placerat lacus. Praesent ut hendrerit magna.</p> 
         <h3>Files</h3> 
         <p><div class="well well-sm"> 
          <div class="row text-center"> 
           <a href="files/310320161/BTTF.aep"><div class="col-xs-3 col-sm-2"><h2><span class="glyphicon glyphicon-file" aria-hidden="true"></span></h2>BTTF.aep</div></a> 
           <a href="files/310320161/delorian.jpg"><div class="col-xs-3 col-sm-2"><h2><span class="glyphicon glyphicon-picture" aria-hidden="true"></span></h2>Delorian.jpg</div></a> 
           <a href=""><div class="col-xs-3 col-sm-2"><h2><span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span></h2>BTTF.zip</div></a> 
          </div> 
         </div></p> 
        </div> 
       </div> 



       <div class="row" id="310320162"> 
        <div class="col-md-12 page-header"> 
        <p><img src="images/spacey.jpg" class="img-responsive"></p> 
         <h2>Post 2<br><small>31/01/2016</small></h2> 
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet lorem auctor risus interdum, a gravida ligula iaculis. Donec sodales leo et nunc fringilla, eu gravida tellus porttitor. Ut at lorem tortor. Pellentesque at magna leo. Nullam venenatis varius nisl, sed convallis mauris tempus eu. Sed feugiat dignissim convallis. Pellentesque at lobortis libero, sit amet placerat lacus. Praesent ut hendrerit magna.</p> 
        </div> 
       </div> 



       <div class="row" id="310320163"> 
        <div class="col-md-12 page-header"> 
        <p><img src="images/compositing.jpg" class="img-responsive"></p> 
         <h2>Post 3<br><small>31/01/2016</small></h2> 
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet lorem auctor risus interdum, a gravida ligula iaculis. Donec sodales leo et nunc fringilla, eu gravida tellus porttitor. Ut at lorem tortor. Pellentesque at magna leo. Nullam venenatis varius nisl, sed convallis mauris tempus eu. Sed feugiat dignissim convallis. Pellentesque at lobortis libero, sit amet placerat lacus. Praesent ut hendrerit magna.</p> 
        </div> 
       </div> 



      </div> 

     </div> 
    </div> 
    <script src="js/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script> 
    $(function() { 
    var $sidebar = $('div[data-spy="affix"]'); 
     resize = function() { $sidebar.width($sidebar.parent().width()); }; 
    $(window).resize(resize); 
    resize(); 
}); 
</script> 
    </body> 
</html> 

申し訳ありませんがそれは、誰かが私が間違ってやっているものを私に教えてください可能性があり、少し厄介です。笑

Answer 1

UPDATE

あなたはブートストラップ接辞を使用しているので、あなたがその機能を削除することができます一つの方法は属性data-spyを除去することである悪夢であることが判明回し事をされて貼り付けます。 .containerの幅を観測したいので、機能を使用してpositionSidebar関数を呼び出すことができます。それはそれは（ミリ秒単位）、特定の時間間隔の後にトリガだというループを作成します。

function positionSidebar() { 
 
    if ($('.container').first().innerWidth() > 750) { 
 
     $('#sidebar').affix({}); 
 
    } else { 
 
     $('#sidebar').removeAttr('data-spy'); 
 
    } 
 
} 
 

 
setInterval(positionSidebar, 300);

ああ、私はこれはJavascriptであることを警告する必要があり、それがJavaの異なる別のプログラミング言語です。名前を誤用しないように注意してください。