Question

我尝试制作类似于此网站http://www.xapo.com的标题，正如您可以从标题中看到的那样，当标题超过其他ID元素时，它会更改背景和颜色。使用javascript或jquery如何抓住这个元素的标题？我正在考虑获得外部高度并相应地改变它。有没有更好的解决方案？提前致谢

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

Answer 1

您可以像这样在标题中添加和删除类：

这里id =＆＃34; mainContent＆＃34;是你想要改变颜色的div的id。这样，每次减少或增加幻灯片的高度时，都不必设置它的高度。

＆＃13;

$(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");
    }
});
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: