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');
    }    
});

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

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/

在滚动x高度后触发jquery

1 个答案: