Блог

У меня есть фиксированная боковая панель и фиксированный заголовок с прокручиваемым содержимым в главном разделе страницы. Заголовок должен запускаться при прокрутке, чтобы скрыть верхнюю часть самого себя при прокрутке вниз, а затем показать себя при прокрутке вверх. Боковая панель может быть запущена для скрытия и отображения с помощью кнопки. Когда это происходит, заголовок возвращается на всю ширину страницы, пока не будет нажата кнопка, чтобы вернуть боковую панель. Страница загружается с открытой боковой панелью.

До сих пор мне удавалось правильно переключать боковую панель и возвращаться на страницу. У меня также заголовок работает так, как задумано при загрузке страницы. Однако проблема, с которой я сталкиваюсь, связана с переходом, тем более с распознаванием измененных классов при закрытии боковой панели. Я считаю, что моя проблема связана с тем, что javascript прокрутки, не распознающий боковую панель, закрыт, потому что при прокрутке он применяет классы к заголовку, когда боковая панель открыта. Чтобы проверить это, я добавил класс с именем SEEME123, который никогда не отображается.

Ниже приведен javascript для изменений прокрутки.

 var exploreOpen = $('#explore').hasClass('open');
var exploreClosed = $('#explore').hasClass('closed');

$(function () {
    var position = $(window).scrollTop();

        if (exploreOpen) {
        $(window).scroll(function () {
        var scroll = $(window).scrollTop();

        if (scroll > position) {
            $('#wrapper-site-header').removeClass('explore-open--header-full');
            $('#wrapper-site-header').addClass('explore-open--header-reduced');

        } else {
            $('#wrapper-site-header').addClass('explore-open--header-full');
            $('#wrapper-site-header').removeClass('explore-open--header-reduced');
        }

        position = scroll;
        });

    }   if (exploreClosed) {

        $(window).scroll(function () {
        var scroll = $(window).scrollTop();

        if (scroll > position) {

            $('#wrapper-site-header').removeClass('explore-closed--header-full');
            $('#wrapper-site-header').addClass('explore-closed--header-reduced');
            $('#wrapper-site-header').addClass('SEEME123');
        } else {

            $('#wrapper-site-header').addClass('explore-closed--header-full');
            $('#wrapper-site-header').removeClass('explore-closed--header-reduced');
        }

        position = scroll;
    });

    } else {}
});
 

Функция javascript для боковой панели переключает открытые и закрытые классы на боковой панели, а также удаляет или добавляет соответствующий класс заголовка.

Я не понимаю, почему это работает не так, как задумано, и хотел бы знать, как решить проблему. Я искал, пытаясь понять, где я облажался, или найти пример, где функция прокрутки выполняет X из-за Y. Я также попытался выполнить вышеуказанное без переменных (т. Е..

 $(function () {
    var position = $(window).scrollTop();

        if (('#explore').hasClass('open')) {
 

), и как отдельные функции.

В любом случае, вот jsfiddle на случай, если я что-то пропустил. https://jsfiddle.net/at0yxo0m /

Спасибо всем за вашу помощь и советы.

РЕДАКТИРОВАТЬ: Дополнительная информация. У меня есть более ранняя версия этого макета, где функция прокрутки изменяет только область заголовка, которая работает с закрытием боковой панели. Однако анимации были неуклюжими в целом, и хуже на мобильных устройствах. Кроме того, чтобы все работало правильно, мне пришлось переносить элементы больше, чем я думал, было необходимо. Поэтому моей целью было максимально упростить процесс, получая желаемый результат.