Остановить плавающий div от скольжения в нижнем колонтитуле - PullRequest
Новая
       18

Остановить плавающий div от скольжения в нижнем колонтитуле

0 голосов
/ 12 марта 2012

Я пытался и некоторое время осматривался, прежде чем задать вам мой вопрос.

У меня есть плавающий элемент div, который я хочу остановить на определенном элементе div (фактически, в нижнем колонтитуле). Я знаю размер высоты нижнего колонтитула.

Я попробовал много кода, найденного в сети и Stackoverflow, но безуспешно. Этот вопрос задавался мне много раз.

Вот эта страница: http://www.autohd.fr/A/

Плавающий элемент div, который должен останавливаться при достижении нижнего колонтитула, находится справа "RÉAGIR". 

$(function() {

var $sidebar = $("#shout"),
    $window = $(window),
    offset = $sidebar.offset(),
    topPadding = 20;

$window.scroll(function() {
    if ($window.scrollTop() > offset.top) {
        $sidebar.stop().animate({
            marginTop: $window.scrollTop() - offset.top + topPadding
        });
    } else {
        $sidebar.stop().animate({
            marginTop: 0
        });
    }
});
});

Спасибо за ваше время и помощь, Alex

1 Ответ

1 голос
/ 13 марта 2012

Просто убедитесь, что нижняя часть этого div не прошла $("#footer").offset().top. Вы можете рассчитать текущее дно div следующим образом: $sidebar.offset().top + $sidebar.height(). Например: 

$(function() {
   var $sidebar = $("#shout"),
    $window = $(window),
    offset = $sidebar.offset(),
    topPadding = 20,
    footerTop = $("#footer").offset().top;  // <-- Get the footer's top

   $window.scroll(function() {
    if ($window.scrollTop() > offset.top) {
        $sidebar.stop().animate({
            marginTop: Math.min(
                          $window.scrollTop() - offset.top + topPadding,
                          footerTop - $sidebar.height()
                       )
        });
    } else {  
        $sidebar.stop().animate({
            marginTop: 0
        });
    }
   });
});
...