javascript - 条件 Jquery 类切换

Question

我想做的基本上是，我有一个带有 Logo 的导航栏。单击 ID 为 #theMenu 的特定链接时，应将类“moveMainLogo”添加到 Logo 图像，并应将类“open”添加到类为“navContainer”的 div。

但是，如果用户完全向下滚动，我希望立即添加“moveMainLogo”类，然后如果单击#theMenu，那么唯一发生的事情就是将 .open 类添加到带有类的 div “导航容器”。

然后，如果用户滚动回页面顶部，它将恢复到原始行为，或者在单击 #theMenu 时添加和删除两个类。

所以我认为我基本上是在尝试这样做......

IF(到顶部的距离大于0)

将 A 类应用到元素 A

当点击元素 B 时，将类 B 应用到元素 B

其他

单击元素 B 时，将类 B 应用到元素 B 并将类 A 应用到元素 A

这是我到目前为止尝试过的代码，我想要哪种方式工作，问题在于它似乎不仅在用户滚动的距离大于 0 时切换类，而且每次用户在页面上的任何位置滚动任意数量。

        window.onscroll = function() {myFunction()};
        function myFunction() {
            if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
                $(".mainLogo").toggleClass("moveMainLogo");
                $("#theMenu").click(function () {
                    $("#animateMenu").toggleClass("hamburger-slim-clicked");
                    $(".navContainer").toggleClass("open");
                });
            } else {
                $("#theMenu").click(function () {
                    $("#animateMenu").toggleClass("hamburger-slim-clicked");
                    $(".navContainer").toggleClass("open");
                });
                $("#theMenu").click(function () {
                    $(".mainLogo").toggleClass("moveMainLogo");
                });
            }
        }

编辑:

fiddle :https://jsfiddle.net/2h3x0uam/1/

在用户滚动之前，如果他们单击菜单，则应应用 movemainlogo 类。如果他们关闭菜单，则应删除 movemainLogo 类。

如果他们滚动，应该应用 movemainmenu 类。如果他们在滚动后打开菜单，movemainlogo 类应该保持应用。如果他们滚动回顶部，则应删除 movemainlogo 类。

Answer 1

您不应该在 scroll 事件中设置所有这些事件。您只需要添加“IF(到顶部的距离大于 0)将 A 类应用于元素 A” 部分。

剩下的你必须添加到 document.ready 或其他东西中:

$(window).on("scroll", function() {
  if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
    $("#ElementA").addClass("classA");
  }
  else {
    $("#ElementA").removeClass("classA");
  }
});

$("#ElementB").on("click", function() {
    $(this).addClass("classB");
    $("#ElementA").addClass("classA");
});

Demo .

希望我没说错，请查看演示。

---

Final result here .