Erstellen eines Divs, das auf der Website befestigt bleibt

Question

Ich versuche, eine Warnung zu meiner Website hinzufügen, die auf der Unterseite meines Bildschirms bleibt und scrollt beim Scrollen mit der Website. Ich habe meine Website mit Bootstrap erstellt, also verwende ich das Bootstrap-Framework. Ich wurde darüber informiert, dass der Affix es ermöglichen würde, dass die Warnung auf der Website scrollbar ist, aber nicht. Wir verwenden Codeignitor, so laden wir Ansichten und die Warnung ist eine der Ansichten, die geladen wird.

Ich habe versucht, hier die Schritte zu folgen: https://www.w3schools.com/bootstrap/bootstrap_affix.asp und hier: Bootstrap, keep div fixed after scrolling to it aber ohne Erfolg.

Es hat folgenden Inhalt.

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

mit folgendem CSS-Code:

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

habe ich versucht, dies zu ändern:

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

Mit folgendem CSS

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

Aber wenn dabei Code also fällt die Warnung komplett aus ff den Bildschirm. Könnte mir bitte jemand einen Hinweis darauf geben?

Answer 1

Ich tat dies und es funktioniert, hier ist die JSfiddle

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

div class = "all" wurde nur die Seite zu füllen, so dass ich nach unten scrollen

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