Форум

tihonan · #1 (**permalink**) 29.03.2013, 10:19

Дело вот в чем, есть div блок который прикручен к низу с position:fixed; bottom:0. При прокрутке он перемещается, но когда он достигает низа страницы, то заходит на подвал сайта(перекрывая там текст). Как сделать что бы этот блок при достижения низу страницы, отступал с низу на высоту подвала
Вот я тут попробовал(там пример был взят с отступом с верху), но что то не выходит, не смог его под низ переделать(в javascript я новичок)
http://jsfiddle.net/7drb4/

danik.js · #2 (**permalink**) 29.03.2013, 11:22

<!DOCTYPE html>
<style>
body {
    height:1500px;
}
#fixed {
    width:218px;
    height:57px;
    background:red;
    position:fixed;
    bottom:0;
    margin-left:200px;
}
</style>
<div id="fixed"></div>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script>
(function(){
    var footerHeight = 100;

    $(window).scroll(function () {
        var bottomOffset = $(document).height() - $(window).scrollTop() - $(window).height();
        if (bottomOffset < footerHeight) {
            $("#fixed").css('bottom', footerHeight - bottomOffset);
        } else {
            $("#fixed").css('bottom', 0);
        }
    });
})();
</script>

Это черновой вариант. Требует оптимизации. Также возможно лучше использовать getBoundingClientRect футера.

tihonan · #3 (**permalink**) 29.03.2013, 11:59

Спасибо добрый человек, встала как влитая

Форум

Справочник

Discord чат

Курсы javascript