滚动 div 错误

Question

我有一个滚动 div 的错误，因为它给我添加了一个空格，我不知道如何消除它

<script type='text/javascript'>
$(window).scroll(function() {
    var nav = $(".menu");
    var top = 200;
    if ($(window).scrollTop() >= top) {

        nav.addClass("-fixo menunu");

    } else {
        nav.removeClass("-fixo menunu");
    }
});
</script>

问题是 div 从 <div class="menu"> 更改为 <div class="menu -fixo menunu"> 并且它必须没有空格，例如 <div class="menu-fixo menunu">。有什么建议吗？

Answer 1

您不能仅添加/删除带有addClass 或removeClass 的类的后缀。

首先，删除.menu并添加menu-fixo menunu。

删除var nav，因为它只会在.menu 而不是.menu-fixo 时获取菜单元素。

var top = 200;
if ($(window).scrollTop() >= top) {
  $(".menu").removeClass("menu").addClass("menu-fixo menunu");
} else {
  $(".menu-fixo").removeClass("menu-fixo menunu").addClass("menu")
}

Answer 2

addClass 和 removeClass 将添加/删除单个类，而不是对类属性字符串中的所有类进行操作。

试试这个

if ($(window).scrollTop() >= top) {
    nav.removeClass("menu");
    nav.addClass("menu-fixo menunu");
} else {
    nav.addClass("menu");
    nav.removeClass("menu-fixo menunu");
}