jQuery - 滾動時更改背景顏色

Question

我想在滾動時轉換固定標題元素的背景顏色。 因此，當用戶向下滾動整頁塊網站時，標題會巧妙地改變以補充塊顏色。 我幾乎已經在Pen上實現了這一點，但是我無法確定如何測量已滾動多少作為何時更改的標志。

一些額外信息：要更改的滾動量為400px。 背景顏色以數組形式存儲和提取。 作為參考我的jQuery代碼如下：

$(document).ready(function(){
  var bgArray = ["#252525","#333333","#454545","#777777"];  
  var scrollHeight = 400;
  var scrolled = $(window).scrollTop(); //What is this measuring?

  $(window).scroll(function() { //Can these conditions be neatened into one function?
    if(scrolled < scrollHeight) {
      $('header').css('background', bgArray[0]);
    }
    if(scrolled > scrollHeight) { // i.e more than 400px
      $('header').css('background', bgArray[1]);
    }
    // and so on (800, 1200...)
  })
})

有關完整代碼，請參閱筆。 任何建議都非常感謝！

Answer 1

更新的解決方案（2019年）

在滾動時根據header下方的當前塊設置header的background ：

• 因為header有固定的位置 ，我們可以使用$header.offset().top來獲取窗口滾動的數量 $header.offset().top ，

• （ 視圖中當前塊的索引 ）是（ 窗口滾動的量 ）與（ 每個塊的高度 ）的比率，

• 現在調整header的高度，視圖中當前塊的索引是Math.floor(($header.offset().top + headerHeight) / sectionHeight) 。

請參閱以下簡化演示：

 $(function() { var $header = $('header'), $window = $(window), bgArray = ["#252525", "red", "blue", "green"], headerHeight = 50, sectionHeight = 400; $window.scroll(function() { $header.css('background', bgArray[Math.floor(($header.offset().top + headerHeight) / sectionHeight)]); }); }); 

 :root { --header: 50px; /* header height */ --block: 400px; /* block height */ } * { box-sizing: border-box; /* include padding in width / height calculations */ } body { margin: 0; /* reset default margin of body */ } header { height: var(--header); /* sets height of header */ position: fixed; top: 0; left: 0; width: 100%; color: #FFF; padding: 12px 0; background: #252525; /* initial background */ transition: background 1s ease; } .container { margin: 0 auto; } .wrap>div { height: var(--block); /* sets height of each block */ text-align: center; } p { margin: 0; /* reset margin of p */ } .block-1 { background: #27AACC; color: #FFF; } .block-2 { background: #668E99; color: #FFF; } .block-3 { background: #4AFFC1; color: #444; } .block-4 { background: #FF8F8A; color: #FFF; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <div class="container"> Website Title. </div> </header> <div class="wrap"> <div class="block-1"> <div class="container"> <p>This pen was made to solve a problem on a project...</p> </div> </div> <div class="block-2"> <div class="container"> <p>...I needed a sticky header with thr right bg colour.</p> </div> </div> <div class="block-3"> <div class="container"> <p>But this conflicted with the footer, which was the same colour...</p> </div> </div> <div class="block-4"> <div class="container"> <p>So the solution was to subtley change the header's bg on scroll</p> </div> </div> </div> 

---

原始方案

使用$(window).scrollTop() > $('.block-1').offset().top檢查每個block的top是否滾動了多少窗口（ scrollTop ）。 所以現在我們可以使用它來改變進入塊的顏色 - 見下面的演示：

 $(document).ready(function() { var $header = $('header'), $window = $(window), bgArray = ["#252525", "#333333", "#454545", "#777777"], headerHeight = $header.outerHeight(); $window.scroll(function() { for (var i = 1; i < 5; i++) { if ($window.scrollTop() + headerHeight > $('.block-' + i).offset().top) { $header.css('background', bgArray[i - 1]); } } }); }); 

 @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700'); body { font-family: 'Roboto', sans-serif; font-size: 30px; font-weight: 300; margin-top: 0; } header { width: 100%; height: 50px; line-height: 50px; position: fixed; font-size: 24px; font-weight: 700; color: #FFF; padding: 12px 0; margin: 0; background: #252525; transition: background 1s ease; } .wrap { padding-top: 74px; margin: 0; } .container { width: 960px; margin: 0 auto; overflow: hidden; } .block-1, .block-2, .block-3, .block-4 { height: 400px; text-align: center; } p { margin-top: 185px; } .block-1 { background: #27AACC; color: #FFF; } .block-2 { background: #668E99; color: #FFF; } .block-3 { background: #4AFFC1; color: #444; } .block-4 { background: #FF8F8A; color: #FFF; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <div class="container"> Website Title. </div> </header> <div class="wrap"> <div class="block-1"> <div class="container"> <p>This pen was made to solve a problem on a project...</p> </div> </div> <div class="block-2"> <div class="container"> <p>...I needed a sticky header with thr right bg colour.</p> </div> </div> <div class="block-3"> <div class="container"> <p>But this conflicted with the footer, which was the same colour...</p> </div> </div> <div class="block-4"> <div class="container"> <p>So the solution was to subtley change the header's bg on scroll</p> </div> </div> </div> 

請注意，該解決方案通過不必要通過瀏覽器調用每個滾動更新的章節循環 -我不喜歡它的外觀。

Answer 2

您使用滾動作為固定變量，您應該在您的條件下直接使用它

這將使包裝div內的所有元素動態化

$(document).ready(function(){
var bgArray = ["#252525","#333333","#454545","#777777"];
$(window).scroll(function() { 
    for(var i = 1; i < bgArray.length; i++) {
      if ($(window).scrollTop() > $('.wrap div:nth-child(' + i + ')').offset().top) {
        $('header').css('background', bgArray[i-1]);        
      }
    }
  });
})

Answer 3

試試這樣：

$(document).ready(function(){
  var bgArray = ["#252525","#333333","#454545","#777777"];  
  var scrollHeight = 400;

  $(window).scroll(function() {

    var scrolled = $(window).scrollTop(); 

    var index=Number((scrolled/scrollHeight).toFixed());

    if(bgArray[index]!=undefined)
        $('header').css('background', bgArray[index]);

  });
})

這是當前滾動，所以它應該在里面： $(window).scrollTop()