Question

我添加了一个粘性菜单。我这样做的方法是删除一个并在滚动时显示另一个。它起初看起来很好但后来我意识到它正在交换元素而不是内部的内容。注意标题，＆＃34;这是我的红色菜单＆＃34;。

<nav>
    <div class="nav-one">
        <p>THIS IS MY RED MENU</p>
    </div>
    <div class="nav-two">
        <p>THIS IS MY GREEN MENU</p>
    </div>
</nav>

$('.nav-two').hide();

$(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() >= 1) {
            $('.nav-one').removeClass('nav-one').addClass('nav-two');
        } else {
            $('.nav-two').removeClass('nav-two').addClass('nav-one');
        }
    });
});

我做错了什么？如果您认为可以采用不同的方式，请告知我们。这是我的jsfiddle。

Answer 1

您的所有代码都在切换nav-*元素上的类。它根本不会改变文本，也不会改变可见元素。根据您对要发生的事情的描述，您应该隐藏/显示基于窗口的当前.nav-*的相关scrollTop元素，您可以使用toggle()来实现，例如这样：

$(window).scroll(function() {
    $('.nav-one').toggle($(this).scrollTop() == 0);
    $('.nav-two').toggle($(this).scrollTop() >= 1);
});

.nav-two {
    /* other styling rules here... */
    display: none;
}

Working example

请注意，我将.nav-two元素隐藏到CSS中以避免FOUC。

Answer 2

您正在更改类，而不是div，因此文本仍为

不更改JS的一个选项：

添加此2 css

.nav-two p:before {
  content: "THIS IS MY GREEN MENU";
  }
  .nav-one p:before {
  content: "THIS IS MY RED MENU";
  }

并删除HTML的文本

另一种选择，只改变JS

$(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() >= 1) {
      $('.nav-one').hide();
      $('.nav-two').show();
    } else {
      $('.nav-two').hide();
      $('.nav-one').show();
    }
  });
});

删除和添加jquery中的元素不能按预期工作

2 个答案: