Блог

Главная - Вопросы по программированию - Остановить залипание боковой панели перед нижним колонтитулом

Остановить залипание боковой панели перед нижним колонтитулом

#jquery

#jquery ( jquery )

Вопрос:

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

 $( window ).on('load resize', function(){
    var $sidebar   = $(".sidebar_container"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 130;


    $window.scroll(function() {
        if (($window.scrollTop() > offset.top) amp;amp; (window.matchMedia('(min-width: 1200px)').matches)) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top   topPadding
            });
        } else if (($window.scrollTop()   offset.top   $(".sidebar_container").height()) > ($window.scrollTop()   $(".main-footer").height())){
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top - $(".main-footer").height()
            });
        }else{
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
        
    });
});

Комментарии:

1. Я бы рекомендовал плагин sticky-sidebar abouolia.github.io/sticky-sidebar — скорее всего, вы будете вычислять верх нижнего колонтитула, высоту окна y боковой панели, а затем применять CSS к боковой панели, чтобы расположить ее в нижней части области прокрутки.

Ответ №1:

Не нужно всех этих хлопот. Просто используйте css position: sticky; , и все готово.

Подробности здесь

https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky_positioning

Комментарии:

1. Спасибо за ваш ответ, но это не то, о чем я просил. В этом случае залипание позиции не является опцией.

Ответ №2:

Решаемая, для всех, кто застрял на одном и том же… Это не сработало, потому что первый дескриптор if должен быть последним возможным сообщением в этом прогрессе. Здесь, чтобы остановиться внизу.

Если кто-то хочет использовать гладкую боковую панель с абсолютным позиционированием… Теперь это работает как заклинание.

 $( window ).on('load resize', function(){
    var $sidebar   = $(".sidebar_container"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 130,
        footerHeight = $(".main-footer").innerHeight();


    $window.scroll(function() {
// 300 is just to catch the point before completly reach the bottom , change or delete
        if (($(window).scrollTop()   $(window).height()) > ($(document).height() - footerHeight   300)) {
            $sidebar.stop().animate({
// 45 is just needed in px on my layout, you can change or delete it
                marginTop: $window.scrollTop() - footerHeight - 45
            });
            }
//erase amp;amp; to use on all viewports
        else if (($window.scrollTop() > offset.top) amp;amp; (window.matchMedia('(min-width: 1200px)').matches)){
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top   topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
            }
});
});
Метки: