Question

我在页面的主要部分有一个固定的侧边栏和一个带有可滚动内容的固定标题。标题将在滚动上触发，以在向下滚动时隐藏自身的顶部，然后在向上滚动时显示自身。可以触发侧边栏隐藏并通过按钮显示自己。当发生这种情况时，标题会返回页面的整个宽度，直到按下按钮以恢复侧边栏。页面加载并打开侧边栏。

到目前为止，我已经能够让侧边栏正确地转换回页面。我还在页面加载时按标题工作。然而，我遇到的问题是转换，当侧边栏关闭时更能识别更改的类。我相信我的问题是滚动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切换侧边栏上的打开和关闭类，同时删除或添加适当的标题类。

我不明白为什么这不能按预期工作，并想知道如何解决问题。我试图了解我搞砸了哪里，或者找到一个例子，其中滚动函数因为Y而执行X.我还尝试了上面没有变量（即..

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

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

），并作为单独的函数。

无论如何，这是一个jsfiddle，以防我错过了什么。 https://jsfiddle.net/at0yxo0m/

谢谢大家的帮助和建议。

编辑：其他信息。我确实有这个布局的早期版本，其中滚动功能只更改用于关闭侧边栏的标题区域。然而，动画一般都很笨重，而在移动设备上则更糟糕。为了让一切工作正常，我不得不包装超出我认为需要的元素。所以我的目标是在获得理想结果的同时尽可能地精简。

关闭固定侧边栏后，固定标题在滚动时没有获得正确的类

0 个答案: