引导，滚动后保持div固定 [英] Bootstrap, keep div fixed after scrolling to it

问题描述

我使用Bootstrap，并有一个简单的页面此处

p>

如果您单击绿色的Go按钮并向下滚动页面，则会加载更多记录。我想让右栏中的广告例如从页面顶部贴到10 px，一旦我向下滚动页面并到达广告div。

正如你所看到的，它仍然是一半

我把这个作为div的HTML：

 < div class =col-md-3> 
< div data-spy =affix> 
< script type =text / javascript> 
 .. advert 
< a href =＃class =back-to-top>返回页首< / a> 
< / div> 
< / div> 
  

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

谢谢

解决方案

Bootstrap文档，您必须编写 .affix ， .affix-top 和 .affix-bottom 样式。

  .affix {
 top：50px; 
位置：固定; 
} 
  

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

< div data-spy =affixdata -offset-top =50>

编辑：我做了一个<一个href =http://jsfiddle.net/3x7ughvL/ =nofollow noreferrer> JSFiddle 来更好地说明使用情况。

I am using Bootstrap, and have a simple page here

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.

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

I have this as the HTML for the div:

<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

解决方案

As per Bootstrap docs, you must write the .affix, .affix-top and .affix-bottom styles yourself.

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

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

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

Edit: I made a quick JSFiddle to better illustrate the usage.

这篇关于引导，滚动后保持div固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！