Làm thế nào tôi có thể tắt chức năng "gắn" của Bootstrap trên màn hình nhỏ hơn?

Question

Tôi đang sử dụng thành phần liên kết trong một trang web cho thanh điều hướng và muốn tắt nó trên màn hình nhỏ hơn. Tôi đang sử dụng phương pháp jquery so với dữ liệu và không thể tìm ra cách tắt nó khi độ phân giải màn hình của tôi nhỏ hơn 767px. Tôi đã thử chụp chiều rộng cửa sổ về thay đổi kích thước và di chuyển và trả về false hoặc loại bỏ các lớp affix nhưng nó không thực sự làm việc tốt.

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

Bạn có thể làm điều đó giống như cách họ làm trên trang Bootstrap, chỉ với CSS. Sử dụng @media queries để phát hiện kích thước màn hình và không đặt vị trí thành fixed nếu màn hình dưới một kích thước nhất định. Ví dụ:

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

Quy tắc này sẽ chỉ có tác dụng nếu chiều rộng màn hình lớn hơn 768px.

Bạn cũng có thể làm điều đó ngược lại, thiết lập vị trí của phần tử một cách rõ ràng để static nếu màn hình có nhỏ hơn so với một kích thước nhất định:

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

Answer 2

Đúng tôi nếu tôi là sai, nhưng hãy thử cài đặt if(z <= 767) {-if(z <= 1) { cách mà nó sẽ không thay đổi kích thước? Trừ khi tôi đang thiếu điểm của câu hỏi của bạn.