【问题标题】：Bootstrap, keep div fixed after scrolling to itBootstrap，滚动到它后保持div固定
【发布时间】：2015-04-05 01:51:23
【问题描述】：

我正在使用 Bootstrap，并且有一个简单的页面here

如果您单击绿色的“开始”按钮并向下滚动页面，则会加载更多记录。我希望右侧栏中的广告例如向下滚动页面并到达广告 div 后，从页面顶部“粘贴”到 10 像素。

如您所见，它保留在页面的一半。

我有这个作为 div 的 HTML：

<div class="col-md-3">
    <div data-spy="affix">
        <script type="text/javascript">
        .. advert
        <a href="#" class="back-to-top">Back to Top</a>
    </div>
</div>

我想知道是否有办法让它做我想做的事情，因为我有点卡住了？

谢谢

【问题讨论】：

你的意思是，当你向下滚动页面时，它应该在距离顶部 10px 处，而当你向上滚动并到达页眉区域时，它应该在原始位置？
检查这个：stackoverflow.com/questions/20100461/…

标签： jquery html css twitter-bootstrap

【解决方案1】：

$(document).ready(function(){ 
	// bind and scroll header div
	$(window).bind('resize', function(e){
		$(".affix").css('width',$(".container-fluid" ).width());
	});
	$(window).on("scroll", function() {
		$(".affix").css('width',$(".container-fluid" ).width());
	});
});

.affix {
    top:50px;
    position: fixed;
   	width: 100%;
	background-color:white;
	z-index:777;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class='container-fluid'>
  <div data-spy="affix" data-offset-top="50">
	<div class="header_for_fix" >
		<div>First</div>
		<div>Second</div>
		<div>Third</div>
	</div>
 </div>
</div>

【讨论】：

【解决方案2】：

Bootstrap 4.0+ 更新

请注意，affix 已从引导程序 as mentioned here 中删除。从 2018 年开始，我还建议您避免使用 jQuery，转而使用 angular、react 或 vue 以获得更好的编码实践。

要从 bootstrap 4.0 开始实现这一点，您需要使用 sticky-top 类。

示例代码：

<div class="card sticky-top">
...Something
</div>

它看起来像这样：

如果你想要一些内边距和边距，你可以设置或添加另一个具有相同类的 div，等等。要有创意:)

【讨论】：

感谢@Fangming - 效果很好。唯一的建议是更改您的答案，使其显示class='sticky-top' 而不是className，就像您输入的答案一样。
@4532066 感谢您的建议！我会更新答案。我正在使用 react JS，这是 react 的一个古怪之处。在编写 JSX 时，我们必须编写 className 来区分 react 的类对象:)

【解决方案3】：

$(document).ready(function(){ 
	// bind and scroll header div
	$(window).bind('resize', function(e){
		$(".affix").css('width',$(".container-fluid" ).width());
	});
	$(window).on("scroll", function() {
		$(".affix").css('width',$(".container-fluid" ).width());
	});
});

.affix {
    top:50px;
    position: fixed;
   	width: 100%;
	background-color:white;
	z-index:777;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class='container-fluid'>
  <div data-spy="affix" data-offset-top="50">
	<div class="header_for_fix" >
		<div>First</div>
		<div>Second</div>
		<div>Third</div>
	</div>
 </div>
</div>

【讨论】：

请为您的解决方案添加一些一般性解释。

【解决方案4】：

按照Bootstrap docs，您必须自己编写.affix、.affix-top和.affix-bottom样式。

.affix {
    top:50px;
    position:fixed;
}

要定义词缀的开始位置，您可以在元素上使用data-offset-* 属性：

<div data-spy="affix" data-offset-top="50">

编辑： 我做了一个快速的JSFiddle 以更好地说明用法。

【讨论】：

这个需要插件吗？我试过你的例子，但 div 只是停留在顶部
@mercy 你将需要 bootstrap javascript 和 jQuery，在 bootstrap 之前调用。完整的说明记录在引导站点getbootstrap.com/docs/3.3/javascript
滚动时位置发生了变化..你能告诉我如何修复滚动时固定的位置吗...
@SantoshK 你在说小提琴吗？ css 的第 19 行设置了一个位置：对，如果你要复制它，你可以删除它。否则，只需在 .affix 规则中设置您想要的任何值
@cloying 我说的位置在我们滚动页面时应该是相同的。。现在在你的 jsfiddle 中，初始时间 div 显示在左侧位置，但是当滚动到右侧位置时，它应该与较早

【解决方案5】：

使用引导程序和 jQuery

$(document).ready(function(){ 
	// bind and scroll header div
	$(window).bind('resize', function(e){
		$(".affix").css('width',$(".container-fluid" ).width());
	});
	$(window).on("scroll", function() {
		$(".affix").css('width',$(".container-fluid" ).width());
	});
});

.affix {
    top:50px;
    position: fixed;
   	width: 100%;
	background-color:white;
	z-index:777;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class='container-fluid'>
  <div data-spy="affix" data-offset-top="50">
	<div class="header_for_fix" >
		<div>First</div>
		<div>Second</div>
		<div>Third</div>
	</div>
 </div>
</div>

【讨论】：