Jquery粘滯導航滿足一定條件時觸發

Question

我已經成功創建了一個粘滯導航並且工作得很好。但是，我希望粘性導航在瀏覽器低於或等於770像素時啓動或運行。

到目前爲止，這是我的代碼

$j = jQuery.noConflict(); 

$j(document).ready(function() { 
    var navOffset = $j(".main-nav").offset().top; 
    var wi = $j(window).width(); 
    var sticky; 
    $j(".responsive-icon").wrapInner('<div class="value"></div>'); 
    $j(".main-nav").wrap('<div class="nav-placeholder"></div>'); 
    $j(".nav-placeholder").height($j(".main-nav").outerHeight()); 

    function stickyFunction() { /*Sticky navigation function*/ 
    sticky = $j(window).scroll(function() { 
       var scrollPos = $j(window).scrollTop(); 
       if (scrollPos >= navOffset) { 
       $j(".main-nav").attr("id", "fixed-menu"); 
       } else { 
       $j(".main-nav").removeAttr("id"); 
       } 
      }); 
    return sticky; 
    } 

    if(wi <= 770) { /* Suppose to Fires up immediately if the browser is lower than 770px */ 
     stickyFunction(); 
    } 
    $j(window).resize(function() { /*Suppose to fires up if the browser resize*/ 
    if(wi <= 770) { 
     stickyFunction(); 
    } 
    }); 
}); 

如何調用stickyfunction到當瀏覽器的寬度滿足條件運行？

謝謝！

Answer 1

只需你使用粘性爲滾動事件，並嘗試使用窗口大小調整事件中滾動事件，使你的函數沒有調整大小窗戶開.. 使用本

/*Sticky navigation function*/ 
    var stickyFunction= (function() { 
       var scrollPos = $j(window).scrollTop(); 
       if (scrollPos >= navOffset) { 
       $j(".main-nav").attr("id", "fixed-menu"); 
       } else { 
       $j(".main-nav").removeAttr("id"); 
       } 
      }); 

代替

function stickyFunction() { /*Sticky navigation function*/ 
    sticky = $j(window).scroll(function() { 
       var scrollPos = $j(window).scrollTop(); 
       if (scrollPos >= navOffset) { 
       $j(".main-nav").attr("id", "fixed-menu"); 
       } else { 
       $j(".main-nav").removeAttr("id"); 
       } 
      }); 
    return sticky; 
    } 

並向窗口滾動事件

$j(window).on('scroll', stickyFunction); 

並調整大小事件

$j(window).on('resize',function() { /*Suppose to fires up if the browser resize*/ 
wi = $j(window).width();   
if(wi <= 770) { 
     stickyFunction(); 
    } 
    });