javascript - 如何根据元素的id更改固定的标题样式

Question

我正在尝试制作类似于此网站的标题 http://www.xapo.com ，正如您从标题中看到的那样，当标题越过其他 id 元素时，它会更改背景和颜色。使用 javascript 或 jquery 我怎样才能捕捉到这个元素的标题？我在想一些事情，比如获得外部高度并相应地改变它。有没有更好的解决方案？提前致谢

编辑:如何让它计算 id 元素的高度并自动更改它？例如，在移动 View 中，某些部分的高度可能会发生变化。

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>