1

I'm trying to add an alert to my website which sticks to the bottom of my screen and scrolls when scrolling with the website. I have built my website with bootstrap so am using the bootstrap framework. I was informed that the affix would allow for the alert to be scrollable on the website but it is not. We are using codeignitor so we load views and the alert is one of the views which is loaded.

I have attempted to follow the steps here: https://www.w3schools.com/bootstrap/bootstrap_affix.asp and here: Bootstrap, keep div fixed after scrolling to it but to no avail.

It has the following content.

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

with the following css code:

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

I have attempted to change this to:

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

With the following css code

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

But when doing so the alert completely falls off the screen. Could someone please give me a pointer to this?

Kirk Beard
  • 9,569
  • 12
  • 43
  • 47
PKGrem
  • 147
  • 1
  • 10

1 Answers1

0

I did this and it worked, here is the JSfiddle

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

div class="all" was just to fill the page so I could scroll down

<div class="all"></div>
<div class="bottom"></div>
Bruno Moutinho
  • 26
  • 1
  • 8
  • Thanks but it hasn't worked for my code, what I do in the index is load->view('header', ['map' => true]); $this->load->view('thumbnails'); $this->load->view('alert'); $this->load->view('about'); $this->load->view('contact'); $this->load->view('search'); ?> I have the alert being the view which contains the code, when doing so it just stays at the bottom of the view in between the thumbnails and alert rather than following the page, I believe its a codeigniter/MVC issue, but I'm not sure – PKGrem Jun 01 '17 at 23:17