2017-03-16 71 views
0

好的,所以我打算在滚动时使用此代码创建一个粘性导航。但是我想在实施它之前充分理解它的含义。好吧,所以我需要知道的是,为什么在第3行stickyNav函数是以变量开始的?这是因为它重新调整整数值?另外为什么是StickyNav();函数在第11行和第13行调用两次?继承人的链接教程http://www.hongkiat.com/blog/css-sticky-position/请解释一下这个jquery代码是怎么说的

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

回答

2

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

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

+0

非常有帮助谢谢 –

0

3号线只是说

function stickyNav() { 

在第11行的另一种方式,你设置正确的类初始文件加载的资产净值。在第13行中,只要用户滚动文档,该类就会刷新。

0

为什么第3行的stickyNav函数是以变量开始的?

在JavaScript中,函数是第一类公民,而第三行中有一个名为stickyNav的变量,它包含定义在那里的函数。

在另一个外部函数范围内使用“var”定义的变量是可以从外部函数内部访问的私有变量以及在同一范围内定义的函数。也称为封闭。

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

不,这是你可以调用

也是一个函数为什么是StickyNav();函数在第11行和第13行调用两次?

第一个启动它,如果您的粘性导航器已经在屏幕之外,则很有用。然后每当窗口滚动时调用它。