Question

我不确定这个标题是否解释得很好但是我现在正在编写的页面中有点抽象

<div class="container" style="width:100%">

<div class="row" style="height: 50px; "> the navigation bar </div>
<div class="row" style="height: 20px; "> important section </div>
<div class="row" style="height: 20px; "> some info </div>
<div class="row" style="height: 30px; "> important section </div>
<div class="row" style="height: 150px; "> content </div>

</div>

当用户向下滚动时，我真的希望将两个重要部分（第2行和第4行）粘在页面顶部，以便在用户浏览内容时它们一起成为某种导航面板

我查看了几个涉及Bootstrap“固定”类的例子，但我不确定它是如何帮助的

非常感谢你的时间

Answer 1

<强> CSS

.sticky {  
position: fixed;  
width: 100%;  
left: 0;  
top: 0;  
z-index: 100;  
border-top: 0;  
}

<强>脚本

$(document).ready(function() {  
var stickyNavTop = $('.nav').offset().top;  

var stickyNav = function(){  
var scrollTop = $(window).scrollTop();  

if (scrollTop > stickyNavTop) {   
$('.nav').addClass('sticky');  
}
else {  
$('.nav').removeClass('sticky');   
}  
};  
stickyNav();  

$(window).scroll(function() {  
stickyNav();  
});  
});

Answer 2

滚动窗口时，需要添加＆amp;删除固定的定位。

看看这个小提琴：

Fiddle

这样的事情可以让你知道如何实现你想要的东西。

    $(window).scroll(function () {
    if ($(this).scrollTop() > 80) {
        $(".important").addClass("fixed");
    } else {
        $(".important").removeClass("fixed");
    }
});

Answer 3

结帐Sticky。这是一个非常棒的剧本，不需要太多思考。一旦浏览器向下滚动到元素，元素就会粘在顶部。

因此，您不必指定元素粘贴的确切像素值，它只是自动生效。

向下滚动时，修复最初不在顶部的2行以粘贴在页面顶部

3 个答案: