Javascript 条件Jquery类切换

我想做的基本上是，我有一个导航栏，上面有一个标志。 单击ID为#菜单的特定链接时，应将一类“MoveMain徽标”添加到徽标图像中，并将一类“open”添加到类别为“navContainer”的div中

但是如果用户完全向下滚动，我希望直接添加“moveMainLogo”类，然后单击菜单，唯一会发生的事情就是。open类添加到div中，并带有类“navContainer”

然后，如果用户滚动回页面顶部，则在单击菜单时会返回到原始行为或添加和删除两个类

所以我想我基本上是想做这个

如果（到顶部的距离大于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");
                });
            }
        }

编辑：

小提琴：

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

如果滚动，则应应用MoveMain菜单类。 如果他们在滚动后打开菜单，movemainlogo类应保持应用。

---

如果它们滚动回顶部，则应删除movemainlogo类。

因为您使用的是切换，所以每次用户滚动时切换类是很自然的。相反，您应该使用一个标志变量，该变量使此事件只发生一次，直到重置为止。差不多

var flag = true;
if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0 && flag) {
  //do it
  flag = false;
}else{
  //do else
  flag = true;
}

---

您不应该在

滚动

事件中设置所有这些事件。此处仅添加“如果（到顶部的距离大于0）将类别A应用于元素A”零件

其余部分必须添加到

文档中。准备好了

或其他内容：

$(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");
});

我希望我没弄错，看看演示

---

---

.

代码可以简化为：

var cond = (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0);

$(".mainLogo").toggleClass("moveMainLogo", cond);
$("#theMenu").click(function () {
    $("#animateMenu").toggleClass("hamburger-slim-clicked", cond);
    $(".navContainer").toggleClass("open", cond);
});

根据Jquery文档： .toggleClass( function [, state ] ) function Type: Function( Integer index, String className, Boolean state ) => String A function that returns class names to be toggled in the class attribute of each element in the matched set. Receives the index position of the element in the set, the old class value, and the state as arguments. state Type: Boolean A boolean value to determine whether the class should be added or removed. .toggleClass（函数[，状态]） 功能 类型：函数（整数索引、字符串类名、布尔状态）=>String 返回要在匹配集中每个元素的class属性中切换的类名的函数。接收集合中元素的索引位置、旧类值和状态作为参数。 状态 类型：布尔型 一个布尔值，用于确定是否应添加或删除类。

---

为什么不使用addClass和removeClass而不是toggle？在尝试执行任何操作之前，您还可以检查该类是否存在。您可以创建一个场景，这会很有帮助。请看：这就是我到目前为止所做的，问题是如果用户不滚动而是打开菜单，MoveMainLogo类将应用，但在关闭菜单时，该类不会取消应用。我不知道如何在不更改scroll上的行为的情况下修复该问题，这是我唯一需要更改的内容。错误链接抱歉-谢谢，我添加了一个JSFIDLE来显示我到目前为止的内容，希望能让问题更清楚。@Fazy nice！但是你的演示不起作用。没有可单击的内容，目标元素及其类也不存在。试着让你的演示更接近你的真实场景。对不起，老兄，这似乎不是最新版本，试试这个。。。虽然，我刚刚意识到，如果你向下滚动然后打开菜单，它会删除moveMainLogo类，因此它实际上修复了主要问题，但添加了另一个问题：（不知道如何检查，但是你的评论在我的脑海中点击了一些东西，我将if（document.body.scrollTop==0）{$（“.mainLogo”）.toggleClass（“moveMainLogo”）；}切换到了…if（document.documentElement.scrollTop==0）{$（“.mainLogo”）.toggleClass（“moveMainLogo”）；}）而且效果很好，再次感谢！