在類滾動時更改導航

我有一段代碼片段，它旨在更改我的固定導航的顏色以匹配用戶滾動過去的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

在類滾動時更改導航

回答

相關問題