मैं छोटे स्क्रीन पर बूटस्ट्रैप के "एफ़िक्स" को कैसे अक्षम कर सकता हूं?

Question

मैं एक नौसेना के लिए साइट में एफ़िक्स घटक का उपयोग कर रहा हूं और इसे छोटी स्क्रीन पर अक्षम करना चाहता हूं। मैं jquery विधि बनाम डेटा का उपयोग कर रहा हूं और यह पता नहीं लगा सकता कि मेरा स्क्रीन रेज़ोल्यूशन 767px से छोटा होने पर इसे कैसे बंद करें। मैंने आकार बदलने और स्क्रॉल करने के लिए विंडो चौड़ाई को कैप्चर करने का प्रयास किया है और या तो झूठी वापसी या प्रत्यय वर्गों को हटा रहा है लेकिन यह वास्तव में अच्छी तरह से काम नहीं करता है।

if($('#subnav').length){ 

    $(window).resize(function() { 
     var wWidth = $(window).width(); 
     getSize(wWidth); 
    }); 

    $(window).scroll(function() { 
     var wWidth = $(window).width(); 
     getSize(wWidth); 
    }); 

    function getSize(z){ 
     if(z <= 767) { 
        // I tried doing return false here, no good. 
      $('#subnav').removeClass('affix').removeClass('affix-top'); 
      $('.nav > li').removeClass('active'); 
     } else { 
      setNav(); 
     } 
    } 

    var wWidth = $(window).width(); 
    getSize(wWidth); 

    function setNav(){ 
     $('#subnav').affix({ 
      offset: { 
      top: 420, 
      bottom: 270 
      } 
     }); 
     $('#subnav').scrollspy(); 
    } 

} 

Answer 1

आप अकेले सीएसएस के साथ बूटस्ट्रैप पेज पर ऐसा ही कर सकते हैं। स्क्रीन आकार का पता लगाने के लिए @media queries का उपयोग करें और यदि स्क्रीन एक निश्चित आकार से नीचे है तो स्थिति को fixed पर सेट न करें। उदाहरण के लिए:

@media (min-width: 768px) { 
    .affix { 
     position: fixed; 
    } 
} 

यह नियम केवल तभी प्रभाव डालेगा जब स्क्रीन चौड़ाई 768px से अधिक हो।

आप भी इसे ठीक इसके विपरीत, तत्व की स्थिति को स्पष्ट रूप से static करने के लिए सेट करता है, तो स्क्रीन एक निश्चित आकार से छोटा है कर सकते हैं:

@media (max-width: 767px) { 
    .affix { 
     position: static; 
    } 
} 

Answer 2

मुझे सही अगर मैं गलत हूँ, लेकिन if(z <= 1) { है कि जिस तरह से यह फिर से आकार नहीं होंगे if(z <= 767) { सेट करने का प्रयास? जब तक मैं आपके प्रश्न का बिंदु नहीं खो रहा हूं।