Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.03.2024, 23:59
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 167

Как исправить работу прилипающего сайдбар во время скроллинга?
Делаю сайдбар с якорями указывающими на сектора в основном контенте во время скроллинга.
position: sticky; не применяю в силу не лучшей кроссбраузерности + проблема задавать позиционирование внутри враппера anchor-menu-wrapper с заданными размерами

Проблемы с которыми сталкиваюсь:
1. Сайдбар прилипает не к верхнему краю и не доезжает до пунктов сверху и снизу, когда контент доскроллился
2. Периодически получаю выход сайдбара за положенные границы и наезд на футер

3. Самое удивительное, почему при скролле до конца страницы отметка верхнего края футера (44518.03125) так сильно различается с высотой скролла+сайдбара (14891)

var $footer = $('footer');
var $footerTop = $footer.position().top;
var $scrollTop = $(window).scrollTop();
var $sidebar = $("#anchor-menu");
var $sidebarHeight = $sidebar.outerHeight(); //$sidebar.height();
console.log("window.pageYOffset",window.pageYOffse t); // window.pageYOffset 13942

console.log("scrollTop ",$scrollTop+$sidebarHeight); //14891
console.log("footerTop ",$footerTop); //44518.03125

Код js
var $sidebar = $("#anchor-menu");
var $sidebarTop = $sidebar.position().top;
var $sidebarHeight = $sidebar.height();
var $footer = $('#colophon');
var $footerTop = $footer.position().top;
    
$(document).scroll(function(e){
        $('.anchor').each(function(a,b){
            let item = document.querySelector('#anchor-menu a[href="#' + b.getAttribute('id') + '"]');
            if (b.offsetTop-5 < document.scrollingElement.scrollTop + 50)
            {
                $sidebar.find('a').removeClass('active');
                item.classList.add('active');
                item.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
            } else 
            {
                item.classList.remove('active');
            }
        });

        var $scrollTop = $(window).scrollTop();
        var $topPosition = Math.max(120, $sidebarTop - $scrollTop);
        if ($scrollTop + $sidebarHeight + 50 > $footerTop) {
        var $topPosition = Math.min($topPosition, $footerTop - $scrollTop - $sidebarHeight);
        }
    
        $sidebar.css("top", $topPosition);
 });


Весь код по ссылке
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как ускорить работу вебсайта lerneree Серверные языки и технологии 7 29.03.2018 11:35
Как вывести время в разных городах? LADYX Элементы интерфейса 33 18.01.2018 15:08
Как сделать disabled кнопки во время отправки формы? Bad Request Events/DOM/Window 7 16.04.2014 13:49
Как получить время простоя машины? IvipIZerg Ваши сайты и скрипты 22 05.06.2009 12:00
Как узнать, завершила ли свою работу рекурсивная функция Ajax Общие вопросы Javascript 4 13.05.2009 14:50