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(); 
    } 
    });