Question

我试图在我的网站上添加一个警报，它贴在我的屏幕底部并在滚动网站时滚动。我用bootstrap构建了我的网站，所以我正在使用bootstrap框架。我被告知该词缀将允许警报在网站上滚动，但事实并非如此。我们正在使用codeignitor，因此我们加载视图，警报是加载的视图之一。

我试图按照此处的步骤操作：https://www.w3schools.com/bootstrap/bootstrap_affix.asp 在这里：Bootstrap, keep div fixed after scrolling to it 但无济于事。

它有以下内容。

<div class="alert alert-danger alert-dismissable data-spy="affix"">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Bear With Us!</strong> We're currently building the site so expect some bugs!
</div>

使用以下css代码：

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

我试图将其更改为：

<div data-spy="affix" data-offset-top="50">
<div class="alert alert-danger alert-dismissable">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
    <strong>Bear With Us!</strong> We're currently building the site so expect some bugs!
  </div>
  </div>

使用以下css代码

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

但是当这样做时，警报完全从屏幕上掉下来。有人可以给我一个指针吗？

Answer 1

我做了这个并且有效，这里是JSfiddle

<style>
.bottom{
  width:100%;
  height: 50px;
  position: fixed;
  bottom:0;
  background-color: black;
}
.tudo{
width:100%;
height:2000px;
}
</style>

div class =＆＃34; all＆＃34;只是填写页面，所以我可以向下滚动

<div class="all"></div>
<div class="bottom"></div>

创建一个仍然贴在网站上的div

1 个答案: