jquery - 滚动 x 高度后触发 jquery

Question

我希望 jQuery 在用户滚动超过特定高度时更改导航背景的颜色。这是我现有的代码段。

var elementPosition = $('.home-menu').offset();

$(window).scroll(function(){
    if($(window).scrollTop() > elementPosition.top){
         $('.pure-menu-open').css('background','#222');
    } else {
         $('.pure-menu-open').css('background','#fff');
    }    
});

但它在大约 50px - 100px 滚动后将颜色更改为 #222。

Answer 1

您的脚本所说的是，如果 scrollTop 值大于 .home-menu 与页面顶部的距离，则更改背景颜色。但是我想你想说的是，如果 scrollTop 值大于偏移量加上元素的高度，则更改颜色。

所以我建议将元素的高度添加到语句中。例如，如果元素的高度为 200px:

if($(window).scrollTop() > elementPosition.top + 200){

您的另一个选择是测试特定值:

if($(window).scrollTop() > 40){

这是一个演示代码笔，我在其中以编程方式添加高度 - http://codepen.io/lukeocom/pen/cbBCk

还有一篇供进一步阅读的文章 - http://iwearshorts.com/blog/measuring-user-scroll-with-jquery/