我正在创建一个网站/投资组合，我想让第二个导航栏“粘”起来，这样一旦用户向下滚动，它就会固定在页面顶部，我尝试使用许多教程，但没有一个他们似乎工作，完成这项任务的最简单方法是什么。
“这是我要粘贴的 Div 代码。”
<div id="SecondNavBar" style="background-image: url('Images/SecondNavBar/SecondNavBar.fw.png'); height: 40px; width: 1211px;">
【问题讨论】：
标签： javascript jquery asp.net user-interface sticky
使用 jquery.waypoints + waypoints-sticky http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/waypoints.min.js"></script>
<script src="/path/to/waypoints-sticky.min.js"></script>
<script>$('.my-sticky-element').waypoint('sticky');</script>
【讨论】：
如果窗口 scrollTop 值大于导航栏的偏移顶部值，则添加一个固定到 #SecondNavBar 的类，否则删除固定的类:)
var navBar = $("#SecondNavBar").offset().top;
$(window).on("scroll", function() {
if ($(window).scrollTop() >= navBar) {
$("#SecondNavBar").addClass('fixed');
} else {
$("#SecondNavBar").removeClass('fixed');
}
});#SecondNavBar {
height: 40px;
width: 1211px;
background: red;
}
.fixed {
position: fixed;
top: 0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<div id="SecondNavBar"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>【讨论】：