Stick div do dolnej części okna przeglądarki

Question

Mam div, który chciałbym trzymać się dolnej części okna przeglądarki (rzeczywiste okno przeglądarki nie jest stroną). Element div musi pozostać u dołu okna przeglądarki, gdy użytkownik przewija.

W tej chwili element div będzie przyklejał się do dolnej części okna podczas pierwszego przewijania początkowego, ale nie będzie on ponownie pozycjonowany za każdym razem, gdy pojawi się nowy zwój. Oto co mam do mojego jQuery:

$(window).scroll(function() { 
    var bHeight = $(window).height(); 
    $('.test').css({ 
     top: bHeight - 77 + 'px' 
    }); 
}); 

Oto jsfiddle http://jsfiddle.net/3ecx7zp9/1/

Answer 1

Może to być po prostu zrobić w CSS. Usuń wszystkie swoje JavaScript i wykonaj następujące czynności:

position: fixed; 
bottom: 77px; 

Fiddle

Answer 2

Czy można uznać za pomocą stałej pozycji div? ustawić position: fixed i bottom: 77px

Jednak jeśli trzeba użyć rozwiązanie jQuery zmienić swój kod do tego

$(window).scroll(function() { 
    var bHeight = $(window).height(); 
    var offset = $(window).scrollTop(); 
    $('.test').css({ 
     top: bHeight + offset - 77 + 'px' 
    }); 
}); 

http://jsfiddle.net/3ecx7zp9/6/

który bierze pod uwagę to, jak daleko masz przewijane i ustawić położenie div odpowiednio

Answer 3

W swoim CSS użyj position: fixed; zamiast position: absolute;.

http://jsfiddle.net/3ecx7zp9/4/

Answer 4

tutaj przejść:

<div class="test" style="position: fixed; width: 100%; height: 77px; background-color: #333;left:0;bottom:0"></div>

Answer 5

Chcesz skorzystać position: fixed;?

https://jsfiddle.net/js7tadve/1/

Answer 6

Sprawdź, czy poniżej link będzie pracować z wami.

Fiddle

#footer { 
position: fixed; 
bottom: 0; 
height: 77px; 
width: 100%; 
background-color: #333; 
} 

Answer 7

to właśnie position: fixed został zaprojektowany dla:

#footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
} 

oto skrzypce: http://jsfiddle.net/uw8f9/