Question

好的，所以我会在滚动时使用此代码创建粘性导航。但在实施之前，我想完全理解它的含义。好的，我需要知道的是为什么第3行是使用变量启动的stickyNav函数？这是因为它重新调整整数值？还有为什么StickyNav（）;第11行和第13行调用两次函数？下面是教程http://www.hongkiat.com/blog/css-sticky-position/

的链接

$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;

var stickyNav = function(){
var scrollTop = $(window).scrollTop();

if (scrollTop > stickyNavTop) { 
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky'); 
}
};

stickyNav();

$(window).scroll(function() {
stickyNav();
});
});

Answer 1

我已经做了一些内联注释来解释代码。希望能帮到你。

$(document).ready(function() {
  // The offset in px from top (y=0) to .nav element
  var stickyNavTop = $('.nav').offset().top;

  // stickyNav is a function()
  var stickyNav = function() {
    // scrollTop is the offset in px where 
    // the browser window is currently scrolled to
    var scrollTop = $(window).scrollTop();

    // test if the user scrolled over the navigation
    if (scrollTop > stickyNavTop) {
      // add class
      $('.nav').addClass('sticky');
    } else {
      // remove class
      $('.nav').removeClass('sticky');
    }
  };

  // call when the body is loaded first time
  stickyNav();

  // register on scroll event
  $(window).scroll(function() {
    // call the function when the user scrolls
    stickyNav();
  });
});

Answer 2

第3行只是另一种说法

function stickyNav() {

在第11行中，您在初始文档加载时为nav设置了正确的类。在第13行中，只要用户滚动文档，就会刷新类。

Answer 3

为什么第3行是stickyNav函数以变量开头？

在javascript中，函数是一等公民，第3行的内容是名为stickyNav的变量，它包含在那里定义的函数。

用＆＃34; var＆＃34;定义的变量另一个外部函数作用域内部是一个私有变量，可以从外部函数的内部访问，也可以在同一作用域中定义的函数。也称为闭包。

这是因为它返回一个整数值？

不，这是一个你可以打电话的功能

为什么StickyNav（）;第11行和第13行调用两次函数？

第一个启动它，如果您的粘性导航器已经离开屏幕，则非常有用。然后每次滚动窗口时调用它。

请解释这个Jquery代码所说的内容

3 个答案: