Question

我尝试做的基本上是，我有一个带有徽标的导航栏。当点击ID为#theMenu的特定链接时，会出现一类＆＃34; moveMainLogo＆＃34;应该添加到徽标图像和一组＆＃34;打开＆＃34;应该使用class＆＃34; navContainer＆＃34;。

添加到div中

但如果用户完全向下滚动，我会喜欢＆＃34; moveMainLogo＆＃34;类直接添加，然后如果点击#theMenu，那么唯一发生的事情是.open类被添加到div中，类为＃34; navContainer＆＃34;。

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

所以我认为我基本上都是想这样做......

IF（距离顶部的距离大于0）

将A类应用于元素A

单击元素B时，将B类应用于元素B

ELSE

单击元素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");
                });
            }
        }

编辑：

小提琴：https://jsfiddle.net/2h3x0uam/1/

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

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

Answer 1

您不应在scroll事件中设置所有这些事件。在那里你只添加＆＃34; IF（距离顶部大于0）将A类应用于元素A＆＃34; 部分。

您必须添加到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

Answer 2

由于您使用切换，因此每次用户滚动时切换类都是很自然的。相反，你应该使用一个标志变量，它只使这个事件一次，直到它重置。

之类的东西

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

Answer 3

代码可以简化为：

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.

条件Jquery类切换

3 个答案: