Сделать div нефиксированным после прокрутки - PullRequest
Новая
       20

Сделать div нефиксированным после прокрутки

0 голосов
/ 25 августа 2018

С помощью следующего кода я исправил свой div после того, как вы прокрутили до него. Но нет, моя боковая панель прокручивается со мной, и это нормально. Но я хочу, чтобы это прекратилось, потому что иначе оно перекрывает нижний колонтитул. Как мне это сделать?

Я использовал следующий код: 

var fixmeTop = $('.whitepaper-section').offset().top;
var footer = $('#footer_bg').offset().top;

if ($(window).width() > 1035) {
    $(window).scroll(function() {
        var currentScroll = $(window).scrollTop();
        if (currentScroll >= fixmeTop && currentScroll <= footer) {
            $('.whitepaper-section').addClass('fixed');
        } else {
            $('.whitepaper-section').removeClass('fixed');
        }
    });
}

Веб-сайт https://cashcontroller.nl/nieuws/

С уважением, Джорен

1 Ответ

0 голосов
/ 25 августа 2018

Вы были близки.

Дело в том, что currentScroll никогда не может быть выше вашей позиции footer.

currentScroll - это количество пикселей над окном просмотра.Таким образом, «ссылка» для передачи элементов - это верхняя часть области просмотра.Очевидно, этого никогда не происходит с вашим нижним колонтитулом.

Итак! Вы должны добавить .whitepaper-section высоту к currentScroll и сравнить с положением нижнего колонтитула.

Дополнительно, .whitepaper-section фиксируется с позицией top ... Вы также должны добавить это расстояние.Я оценил это до 1em в коде ниже. 

var fixme = $('.whitepaper-section');
var fixmeTop = fixme.offset().top;
var fixmeHeight = fixme.outerHeight();
var fixedtopOffset = 1em;   // Adjust that with the value you have in CSS .fixed
var footer = $('#footer_bg').offset().top;

if ($(window).width() > 1035) {
    $(window).scroll(function() {
        var currentScroll = $(window).scrollTop();
        if (currentScroll >= fixmeTop && currentScroll + fixmeHeight + fixedtopOffset <= footer) {
            $('.whitepaper-section').addClass('fixed');
        } else {
            $('.whitepaper-section').removeClass('fixed');
        }
    });
}
...