在类滚动时更改导航

我有一段代码片段，它旨在更改我的固定导航的颜色以匹配用户滚动过去的div。在类滚动时更改导航

我遇到的问题是，因为在整个页面中存在多个相同元素的实例，所以当用户不在本身时，它们都尝试删除背景类。

我怎么才能得到这个只有当使用滚动的元素，而不是当它是在区域之外触发？

我是新来的jQuery，所以任何意见将不胜感激。谢谢！

$(window).scroll(function(){ 
    $(".banner").each(function(){ 
    var windowScroll = $(window).scrollTop(), 
     bannerTop  = $(this).offset().top, 
     bannerHeight = $(this).outerHeight(), 
     bannerbottom = (bannerTop + bannerHeight), 
     bgColor  = $(this).attr("primary-colour"); 

    // When the window scrolls over the banner then change the nav colour 
    if ((windowScroll >= bannerTop) && (windowScroll <= bannerbottom)) { 
     $(".body-header").css("background", bgColor); 
    } 
    else { 
     $(".body-header").css("background", ""); 
    } 
    }); 
});

https://jsfiddle.net/x789qh7m/1/

来源

2015-07-21 ewhicher

我们展示的HTML代码或进行的jsfiddle请。 –

@ZakariaAcharki在这里你走我的男人： https://jsfiddle.net/x789qh7m/1/ – ewhicher

你的代码将工作，只有当标题是比去年banner.It无法正常工作，因为滚动时，你遍历所有横幅。所以即使第一个横幅将设置颜色，.each将迭代，直到最后一个（橙色），它会重置它。
如果我正确理解你，这是你的解决方案：https://jsfiddle.net/x789qh7m/3/ - 我只是在迭代横幅之前放入else。该算法很简单 - 滚动设置默认没有背景，如果下面有一些横幅，则将背景更改为相同的颜色。

$(window).scroll(function() { 
    $(".body-header").css("background", ""); 
    $(".body-header").removeClass("invert"); 
    $(".banner").each(function() { 
     var windowScroll = $(window).scrollTop(), 
      bannerTop = $(this).offset().top, 
      bannerHeight = $(this).outerHeight(), 
      bannerbottom = (bannerTop + bannerHeight), 
      bgColor = $(this).attr("primary-colour"); 

     if ((windowScroll >= bannerTop) && (windowScroll <= bannerbottom)) { 
      $(".body-header").css("background", bgColor); 
      $(".body-header").addClass("invert"); 
     } 
    }); 
});

来源

2015-07-21 10:02:06 alynioke

令人惊叹！非常感谢@alynioke，我知道这很简单。 – ewhicher

只要返回false跳出each循环。广东话遍历所有因为你的其他覆盖背景的CSS属性的值：

$(window).scroll(function() { 
 
    $(".banner").each(function() { 
 
    var windowScroll = $(window).scrollTop(), 
 
     bannerTop = $(this).offset().top, 
 
     bannerHeight = $(this).outerHeight(), 
 
     bannerbottom = (bannerTop + bannerHeight), 
 
     bgColor = $(this).attr("data-colour"); 
 

 
    // When the window scrolls over the banner then change the nav colour 
 
    if ((windowScroll >= bannerTop) && (windowScroll <= bannerbottom)) { 
 
     $(".body-header").css("background", bgColor); 
 
     $(".body-header").addClass("invert"); 
 
     return false; 
 
    } else { 
 
     $(".body-header").css("background", ""); 
 
     $(".body-header").removeClass("invert"); 
 
    } 
 
    }); 
 
});

.body-header { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 20px; 
 
    border: 1px solid; 
 
} 
 
.banner { 
 
    margin-bottom: 150px; 
 
} 
 
.banner:nth-child(5) { 
 
    margin-bottom: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="body-header"></nav> 
 
<section class="banner" data-colour="rgb(52, 49, 57)"> 
 
    <div style="background: rgb(52, 49, 57); width: 100%; height: 200px"></div> 
 
</section> 
 
<section class="banner" data-colour="rgb(234, 104, 52)"> 
 
    <div style="background: rgb(234, 104, 52); height: 200px"></div> 
 
</section> 
 
<section class="banner" data-colour="rgb(14, 104, 52)"> 
 
    <div style="background: rgb(14, 104, 52); height: 200px"></div> 
 
</section>

来源

2015-07-21 10:31:12 Persijn

在类滚动时更改导航

回答

相关问题