Удерживайте div в нижней части окна браузера

Question

У меня есть div, который я хотел бы придерживать в нижней части окна браузера (фактическое окно браузера не на странице). Div должен оставаться в нижней части окна браузера, пока пользователь прокручивается.

Прямо сейчас, div будет придерживаться нижней части окна на первом начальном прокрутке, но он не будет переставляться каждый раз, когда появится новый свиток. Вот что у меня есть для моего JQuery:

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

Вот jsfiddle http://jsfiddle.net/3ecx7zp9/1/

Answer 1

Это может быть просто сделать в CSS. Удалить все ваши JavaScript, и выполните следующие действия:

position: fixed; 
bottom: 77px; 

Fiddle

Answer 2

считается ли вы с использованием фиксированного положения DIV? установить position: fixed и bottom: 77px

Однако, если вы должны использовать решение JQuery изменить код этой

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

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

, который принимает во внимание то, как далеко вы прокрутили и установить положение DIV соответственно

Answer 3

В вашем CSS используйте position: fixed; вместо position: absolute;.

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

Answer 4

здесь вы идете:

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

Answer 5

Хотите использовать position: fixed;?

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

Answer 6

Проверьте, если ниже ссылка будет работать с вами.

Fiddle

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

Answer 7

Это именно то, что позиция: фиксированная был разработан для:

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

Вот скрипку: http://jsfiddle.net/uw8f9/