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

Bootstrap, keep div fixed after scrolling to it

提问by 4532066

I am using Bootstrap, and have a simple page here

我正在使用 Bootstrap，这里有一个简单的页面

If you click the green "Go" button and scroll down the page, more records are loaded. I wanted the advert in the right hand column to e.g. "stick" to 10 px from the top of the page once I have scroll down the page and reached the advert div.

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

As you can see, instead it remains half way down the page.

正如您所看到的，它仍然保留在页面的一半位置。

I have this as the HTML for the div:

我将此作为 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>

I wondered if there is a way to get it to do what I'm trying to do, as I'm a bit stuck?

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

Thanks

谢谢

回答by Fangming

Bootstrap 4.0+ update

引导程序 4.0+ 更新

Please note that the affixis removed from bootstrap as mentioned here. As of 2018, I also suggest you to avoid jQuery and move to angular, react or vue for better coding practices.

请注意，正如此处提到的那样，affix从引导程序中删除了。从 2018 年开始，我还建议您避免使用 jQuery，转而使用 angular、react 或 vue 以获得更好的编码实践。

To make that happen now from bootstrap 4.0, you need to use the sticky-topclass.

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

Sample code:

示例代码：

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

And it looks like this:

它看起来像这样：

If you want some padding & margin, you can set that up or add another div with the same class on top of it, etc. Be creative :)

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

回答by cloying

As per Bootstrap docs, you must write the .affix, .affix-topand .affix-bottomstyles yourself.

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

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

To define where the affix begins, you can use an data-offset-*attribute on the element:

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

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

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

Edit:I made a quick JSFiddleto better illustrate the usage.

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

回答by Vlad

with bootstrap and jQuery

使用引导程序和 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>

回答by Omer Yilmaz

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

回答by Hitesh

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