我想做一个相对的div，可以向下滚动，直到它到达页面的顶部，然后div应该是固定的，并保持在顶部，直到页面再次滚动。也许我应该使用jquery?!
这些是我的代码。名为:.sidebar的div是我想在滚动时修复的!我已经展示了更多的div和css样式来向你们展示它是如何实现的。它看起来是这样的:http://imagizer.imageshack.us/a/img841/5807/pjpj.png
<div id="header" class="container">
<div id="navbar">
<div id="menu">
<ul><h2>
<li><a href="#" accesskey="3" title="contact">contact</a></li>
<li><img src="images/icon_triangle.jpg"></li>
<li><a href="portfolio.html" accesskey="4" title="portfolio">portfolio</a></li>
<li><img src="images/icon_triangle.jpg"></li>
<li><a href="#" accesskey="5" title="about">about</a></li>
<li><img src="images/icon_triangle.jpg"></li>
<li><a href="index.html" accesskey="6" title="home">home</a></li>
</h2>
</ul>
</div>
</div>
</div>
<div id="content">
<h7>HappyDays</h7><br /><br />
<h5>Webdesign</h5>
<h4>Made in Photo</h4><br /><br />
<h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor mattis ornare. Ut semper sem nec justo adipiscing ullamcorper. Nullam sit amet lacus et arcu vestibulum volutpat. Cras mi lectus, consequat quis pretium eu, sodales vitae velit. Donec imperdiet quis urna at egestas. Curabitur in libero commodo est hendrerit condimentum. In hac habitasse platea dictumst. Ut posuere, purus nec convallis lobortis, neque est ornare felis, ut iaculis nulla erat sed diam. Cras non leo libero.</p></h4><br /><br />
<a rel="prettyPhoto" href="images/cocktail.jpg"><img src="images/images/cocktail.jpg" style="width: 50%; float: left;"></a>
</div>
<div class="sidebar">
<ul>
<li><a href="portfolio.html" accesskey="3"><img src="images/icon_triangle_all.jpg" width="80%"><br /><br /><h6>All</h6></a></li>
<li><a href="#" accesskey="4" title="portfolio"><img src="images/icon_triangle_previous.jpg" width="30%"><br /><br /><h6>Previous</h6></a></li>
<li><a href="#" accesskey="5"><img src="images/icon_triangle_next.jpg" width="50%"><br /><br /><h6>Next</h6></a></li>
</ul>
<div class="line2"></div>
</div>
现在是CSS!
#menu
{
height: 50px;
padding: 0 13em;
position: fixed;
top: 0.5%;
width: 50%;
word-spacing:30px;
z-index:999;
}
#navbar
{
background:#fff;
height:5%;
width:100%;
bottom: auto !important;
margin: 0 !important;
position: fixed !important;
top: 0;
border-bottom: 1px solid #a7a7a7;
z-index:999;
}
#content {
background: none repeat scroll 0 0 #FFFFFF;
position: relative;
font-size: 14px;
line-height: 25px;
margin-left:auto;
margin-right:auto;
text-align: center;
width: 66.667%;
}
.sidebar
{
float:right;
position:relative;
width: 50%;
z-index:999;
text-decoration:none;
}
.sidebar li {
display: inline-block;
list-style-type: none;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-ms-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}
我是你所链接的Fixate网站的开发者之一。
目前，jQuery的一些实现将是最好的选择。这是一个棘手的问题-你需要很好地理解JS和CSS布局基础。
有一个position: sticky;属性，一旦所有浏览器都支持它，你就可以这样做。长丝组有一个可能有用的填充，虽然我不确定它在响应项目上的表现如何。
在此之前，您必须使用以下选项之一:
1。在js中硬编码值，如@manu所示。
2。使用插件的动态方法
jQuery stickToTop (shameless plug)
我们建立了一个jQuery插件，jQuery sticktotop，它解决了这个问题，而你不必知道滚动高度。
作为一个例子，将它包含在jQuery之后，然后在你的主js文件中初始化stickToTop，或者在你的页面上的脚本标签中:
// make the element with the class .js-sticky-menu sticky if window is > 480px
$('.js-sticky-menu').stickToTop({minWindowWidth: 480);
现场演示
jQuery销在我们的网站上，我们使用了一个叫做jquery pin的插件，因为当时我们的插件有一些问题。其中一些问题已经解决了。
我们的插件的一个优点是，它在调整大小时表现更好(只要你不试图使浮动div具有粘性——如果你的目标是浮动，而不是浮动内的div——见这里)。元素将在粘贴时动态调整大小。
Jquery pin，另一方面，将允许您动态地设置粘贴元素的容器的下限
下面是一个简单的脚本，您可以使用它来重新创建刚才展示的侧边栏示例。
作为一个初创公司来帮助你，这应该足够了。
JSFIDDLE演示脚本:
$(document).ready(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal > 150) {
$('#subnav').css({'position':'fixed','top' :'0px'});
} else {
$('#subnav').css({'position':'static','top':'auto'});
}
});
});
希望能有所帮助
像这样?
我使用了Waypoints sticky元素，效果非常好。