标签 javascript jquery html css
<分区>
我想创建一个导航栏，它随着页面向下滚动而变化，类似于他们在 techcrunch.com 上的导航栏。
我不只是想制作一个停留在顶部的粘性标题，我知道如何在 CSS 中做到这一点。但我也想在滚动到某个点后更改它的高度和嵌套在其中的对象的样式。
我已经做了一些研究，大多数人说应该使用 .scroll 函数或 jQuery 中的类似函数来完成，但我没有找到关于如何做的完整解释。老实说，我对 jQuery 或 Javascript 不是很熟悉。
我找到的所有类似问题的答案都不允许我编辑或更改 header 中的嵌套内容，只能更改 header 本身的样式。 如果有人能详细地为我解释这个过程，我将不胜感激。 我真的很想学习如何做到这一点，而不仅仅是复制一些代码并将其粘贴到我的网站上。
最佳答案
这是一个通用的解决方案。
这涉及到有多个标题(里面可以有完全不同的内容)，您可以根据滚动位置从中选择性地显示一个。每个 header 元素都有一个 data-visible-range 属性，用于定义应显示的最小和最大滚动位置。
演示:http://jsfiddle.net/cydfh2s6/1/
HTML
<div class="header header-1" data-visible-range="0-100">Header 1</div>
<div class="header header-2" data-visible-range="101-500">Header 2</div>
<div class="header header-3" data-visible-range="501-">Header 3</div>
<div class="body">BODY</div>
CSS
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: none;
}
.header-1 {
background-color: yellow;
display: block; /* header 1 is visible by default */
}
.header-2 {
background-color: red;
}
.header-3 {
background-color: green;
}
.body {
padding-top: 50px;
height: 2000px;
}
JS
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
var headerToDisplay = false;
$('.header[data-visible-range]').each(function() {
var range = $(this).data('visible-range').split('-');
range[0] = range[0] ? parseInt(range[0], 10) : 0;
range[1] = range[1] ? parseInt(range[1], 10) : $(document).height();
if(scrollTop >= range[0] && scrollTop <= range[1]) {
headerToDisplay = $(this);
return false;
}
});
if(headerToDisplay && !headerToDisplay.is(':visible')) {
$('.header[data-visible-range]').hide();
headerToDisplay.show();
}
});
关于javascript - 如何创建在您向下滚动页面时更改的标题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31237794/