我意识到这个问题之前已经被问过 - 但我已经搜遍了几乎所有我能找到的东西,我想要这样的东西 - Incredible Things
这是我所拥有的http://shoelesstestblog.blogspot.com
这是代码
<div id="myElement">
<div id="nav">
<a href="">Home</a>
</div>
</div>
<style>
#myElement {
background-color: #fff;
color: #fff;
font-family: 'Bitter';
font-size: 13px;
letter-spacing: 1px;
line-height: 40px;
margin-left: -180px;
opacity: 0.9;
text-align: center;
text-transform: uppercase;
width: 1280px;
word-spacing: 20px;
z-index: 5000;
}
</style>
<script type="text/javascript">
var yPosition; // save original y position of element here
window.onload = function(){ // once entire page is loaded this function is fired
// save original y position of element before it is scrolled
yPosition = document.getElementById("myElement").offsetTop;
}
window.onscroll = function(){ // scrolling fires this function
var myElement = document.getElementById("myElement"); // for cleaner code
// compare original y position of element to y position of page
if( yPosition <= window.pageYOffset ){
// snap element to the top by changing css values of element
myElement.style.position = "fixed";
myElement.style.top = "0px";
}
else {
// re-position to original flow of content
myElement.style.top = ""; // set to default
}
}
</script>
最佳答案
如果您希望固定到页面顶部的元素是 <div id="myElement">
我建议您添加属性 position:fixed;
到元素对应的 CSS。
像这样:
#myElement {
left: 0px;
top: 0px;
position:fixed;
background-color: #fff;
color: #fff;
font-family: 'Bitter';
font-size: 13px;
letter-spacing: 1px;
line-height: 40px;
margin-left: -180px;
opacity: 0.9;
text-align: center;
text-transform: uppercase;
width: 1280px;
word-spacing: 20px;
z-index: 5000;
}
</style>
我还添加了属性left: 0px; top: 0px;
确定元素在屏幕上的位置。
关于jquery - 滚动时将 div 固定到页面顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19263905/