如何根據元素的ID更改固定標題樣式

Question

我試圖製作類似於此網站的標題http://www.xapo.com，正如您可以從標題中看到的，它會在標題越過其他id元素時更改背景和顏色。與JavaScript或jQuery的我怎樣才能趕上頭過去這個元素？ 我在想像得到外高，並相應地改變它。有更好的解決方案嗎？ 在此先感謝

編輯︰我如何得到它計算id元素的高度並自動更改它？例如在移動視圖中，某個部分的高度可能會發生變化。

Answer 1

您可以添加和刪除類像這樣的標題：

這裏的id =「搜索Maincontent」是要改變顏色的div ID。這樣，每次您減少或增加幻燈片的高度時，都不必設置高度。

$(document).ready(function(){ 
 
    var contentStart = $('#mainContent').offset().top; 
 
    $(window).scroll(function() { 
 
    if ($("header").offset().top > contentStart) { 
 
     $("header").addClass("scrolling-nav-header"); 
 
    } 
 
    else { 
 
     $("header").removeClass("scrolling-nav-header"); 
 
    } 
 
}); 
 
});

header{ 
 
    width:100%; 
 
    margin:0; 
 
    paddong:0; 
 
    height:100px; 
 
    background-color:red; 
 
    position:fixed; 
 
} 
 
#firstContent{ 
 
    width:100%; 
 
    margin:0; 
 
    paddong:100px 0 0 0; 
 
    background-color:green; 
 
} 
 
#mainContent{ 
 
    width:100%; 
 
    margin:0; 
 
    paddong:0; 
 
    height:300px; 
 
    background-color:black; 
 
} 
 
header.scrolling-nav-header{ 
 
    background-color:blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header></header> 
 
<div id="firstContent"> 
 
    <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? 
 
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"" 
 
    </p> 
 
</div> 
 
<div id="mainContent"></div>