Bootstrap，滚动到它后保持div固定

Question

我正在使用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>

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

由于

Answer 1

根据Bootstrap docs，您必须自己编写.affix，.affix-top和.affix-bottom样式。

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

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

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

修改 我快速JSFiddle以更好地说明用法。

Answer 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，等等。发挥创意：）

Answer 3

使用bootstrap和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>

Answer 4

$(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>

Answer 5

$(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>