Question

我有两列布局，如下所示：

 <div class="row">
    <div class="col-xs-8 content"> 
    </div>
    <div class="col-xs-4">
    </div>
 </div>

如果我将position:sticky设置为侧边栏，我会看到侧边栏的粘性行为：https://codepen.io/marcanuy/pen/YWYZEp

CSS：

.sticky {
  position: sticky;
  top: 10px;
}

HTML：

 <div class="row">
    <div class="col-xs-8 content"> 
    </div>
    <div class="col-xs-4 sticky">
    </div>
 </div>

但是当我将sticky属性设置为侧边栏中的菜单时，相关文章部分正常滚动并使用菜单div 获取粘性行为，它不起作用：

 <div class="row">
    <div class="col-xs-8 content"> 
    </div>
    <div class="col-xs-4">
       <div class="menu sticky">
       </div>
    </div>
 </div>

这是第一个使用粘性行为滚动整个侧边栏的示例的截屏视频，然后将粘性属性更改为不起作用的菜单：

Bootstrap 4 recommends sticky 属性作为对Affix jQuery插件的删除支持：

删除了Affix jQuery插件。我们建议使用位置：粘性polyfill。

我已经测试过了：

Firefox {是css.sticky.enabled=“true”下的about:config
在experimental Web Platform features启用chrome://flags的Chrome 50.0.2661.94（64位）

（这不是How to make a sticky sidebar in Bootstrap?的副本，因为那个正在使用BS词缀）

Answer 1

在稳定的 Bootstrap 4.0.0 版本中，使用const watchOptions = { enableHighAccurary: true, maximumAge:5000, timeout: 5000 } if(state == 'login'){ this.watch = this.geolocation.watchPosition(watchOptions).subscribe(pos => { if(pos.coords != undefined){ console.log('tracking'); this.firebaseApp.database().ref("LOCATION").child(this.user.$key).update({ lat: pos.coords.latitude, lng: pos.coords.longitude, timeStamp: moment().format('MMMM Do YYYY, hh:mm A').toString(), fName: this.user.fName, lName: this.user.lName, status: 'login' }); } }); } else{ this.watch.unsubscribe(); }类完成...

Demo

sticky-top

即使在标题/导航栏的高度，内容和页脚的动态/未知也是如此。

https://www.codeply.com/go/QJogUAHIyg

Answer 2

我解决了启用flexbox的问题。在Bootstrap的Github存储库中提出问题之后，我得到了一个Bootstrap member的答案：

.col-xs-4并不像.col-xs-8一样高，所以基本上没有菜单空间为＆＃34;浮动＆＃34;在粘性开始的时候。使.col-xs-4更高，并且工作正常： https://codepen.io/anon/pen/OXzoNJ如果您启用了Flexbox版本我们的网格系统（通过$ enable-flex：true;），你得到自动等高柱免费，在您的情况下派上用场。

Answer 3

Polyfill explanation.

您需要包含JS polyfill才能使用它。 Bootstrap页面上的链接推荐的polyfill是

这是一个更新的代码集：https://codepen.io/anon/pen/zBpNRk

我包含了所需的polyfill（我使用了stickyfill）并用

调用它

var stickyElements = document.getElementsByClassName('sticky');

for (var i = stickyElements.length - 1; i >= 0; i--) {
    Stickyfill.add(stickyElements[i]);
}

图书馆建议你将它用于你的css

.sticky {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
}
.sticky:before,
.sticky:after {
    content: '';
    display: table;
}

最后你将div订单混淆了。您需要将div与粘性类放在整行之外，这样我就会用另一个空的<div class="col-xs-6"></div>填充行的其余部分。

Answer 4

@wrldbt的答案可以解决引导4 alpha 5的问题，但在alpha 6中，-xs中缀已被删除，网格已被重写。

我把东西放在一起，有点干净，使用当前版本的bootstrap＆amp;还包括使用flexbox的粘性页脚。

https://codepen.io/cornex/pen/MJOOeb

如何使用CSS位置粘贴来使用Bootstrap 4保持侧边栏可见

4 个答案: