Mobil cihazlarda Affix'i devre dışı bırak

Question

Merhaba, bir kenar çubuğunu yaptım ve kendi genişliğini otomatik olarak ana öğesine göre güncellemek için bir javascript kullandım ancak şimdi pencere 750px'in altına düştüğünde eki otomatik olarak kaldırmak istiyorum (ki bence bootstrap içindeki tablet kırılma noktasıdır).

ben başka bir sayfada bu kodu buldum ama

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

Bu sitemde

olduğu (btw ı java kodlama büyük bir bilgi yok) benim sayfasında çalışmak alamayan

<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> 

Üzgünüm Biraz dağınık, birileri bana ne yaptığımı söyle lütfen. haha

Answer 1

GÜNCELLEME

Eğer Bootstrap yapıştırmayın kullandığınız için, bu işlevselliği kaldırabilirsiniz tek yönlü niteliği data-spy kaldırarak bir kabus olduğu ortaya dönüm şeyler olduğunu Affixing. Ve .container genişliğini gözlemlemek istediğinizden, setInterval işleviyle positionSidebar işlevini çağırabilirsiniz. O (milisaniye cinsinden) belirli aralıklarla sonra tetiklenen bir döngü oluşturur:

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

 
setInterval(positionSidebar, 300);

Oh, bu Javascript olduğunu uyarmak gerekir ve Java farklı farklı programlama dili var . İsimleri kötüye kullanmamaya dikkat edin.