Habe bei einem Projekt an dem ich arbeite einen "Sticky Footer" eingebaut. Der soll also nur angezeigt werden wenn das Seitenende erreicht ist. Das funktioniert auch mit folgendem jQuery Code:
Nun habe ich auf einer Unterseite einen div container mit overflow:auto;
Heißt also ich scrolle nicht meine gesamte Seite sondern nur innerhalb dieses Containers.
Der Container hat eine Höhe von 804px bei meinem Browser.
#content {height: calc(100% - 160px); width: 100%; position: relative; top: 160px; overflow: auto; bottom: 40px;}
bottom:40px; weil derzeit der Footer mit einer höhe von 40px noch angezeigt wird un der #content nicht dahinter laufen soll.
top: 160px; damit der Inhalt schon vor Fensterrand verschwinden soll.
Die Kalkulation der Höhe damit die 160px unten wieder abgezogen werden. (calc(100%-200px) und bottom raus würde auch gehen)
Innerhalb des #content ist dann noch ein div container mit der tatsächlichen Höhe von 1804px der dann gescrollt wird
Die Struktur sieht dann so aus:
Nun müsste ich doch theoretisch nur den oberen Code in
if (jQuery('#content').scrollTop() == jQuery('#content-mid').height() - jQuery('#content').height()){
...
umändern damit es funktioniert? Klappt nämlich nicht.
Der Footer kriegt dauerhaft display:none; gesetzt (Ist in einem Interval)
Mir fällt gerade auch noch auf dass in dem #content auch noch andere Div's drin sind mit bestimmten Höhen und Inhalt. Spielt das ne rolle?
Jemand ne Idee?
Code:
if (jQuery(window).scrollTop() == jQuery(document).height() - jQuery(window).height()){
jQuery('#footer').css('display','block');
}
else {
jQuery('#footer').css('display','none');
}Nun habe ich auf einer Unterseite einen div container mit overflow:auto;
Heißt also ich scrolle nicht meine gesamte Seite sondern nur innerhalb dieses Containers.
Der Container hat eine Höhe von 804px bei meinem Browser.
#content {height: calc(100% - 160px); width: 100%; position: relative; top: 160px; overflow: auto; bottom: 40px;}
bottom:40px; weil derzeit der Footer mit einer höhe von 40px noch angezeigt wird un der #content nicht dahinter laufen soll.
top: 160px; damit der Inhalt schon vor Fensterrand verschwinden soll.
Die Kalkulation der Höhe damit die 160px unten wieder abgezogen werden. (calc(100%-200px) und bottom raus würde auch gehen)
Innerhalb des #content ist dann noch ein div container mit der tatsächlichen Höhe von 1804px der dann gescrollt wird
Die Struktur sieht dann so aus:
Code:
...
<div id="content">
<div id="content-mid">INHALT</div>
<div id="footer">FOOTER</div>
</div>
...Nun müsste ich doch theoretisch nur den oberen Code in
if (jQuery('#content').scrollTop() == jQuery('#content-mid').height() - jQuery('#content').height()){
...
umändern damit es funktioniert? Klappt nämlich nicht.
Der Footer kriegt dauerhaft display:none; gesetzt (Ist in einem Interval)
Mir fällt gerade auch noch auf dass in dem #content auch noch andere Div's drin sind mit bestimmten Höhen und Inhalt. Spielt das ne rolle?
Jemand ne Idee?