Question

我已经成功创建了一个粘性导航，并且工作得很好。但是，我希望当浏览器低于或等于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();
    }
  });
});

当浏览器宽度符合条件时，如何调用stickyfunction运行？

谢谢！

Answer 1

只是你使用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();
    }
  });

当满足一定条件时，Jquery粘性导航会启动

1 个答案: