javascript - 满足特定条件时触发jQuery粘性导航

我已经成功创建了一个粘性导航，并且运行正常。但是，我希望在浏览器小于或等于770px时启动或运行粘性导航。

到目前为止，这是我的代码

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

当浏览器宽度满足条件时，如何调用粘滞函数运行？

谢谢！

最佳答案

只需将sticky用作滚动事件，然后尝试在窗口调整大小事件内使用滚动事件，以免在调整大小窗口中触发您的函数。
用这个

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