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

我正在添加一个粘性菜单。我这样做的方式是删除一个并在滚动时显示另一个。一开始看起来不错，但后来我意识到它是在交换元素，而不是其中的内容。注意标题“这是我的红色菜单”

---

我做错了什么？如果你认为可以做的不同，请让我知道。这是我的。

您的代码所做的只是在

nav-*

元素上切换类。它不会更改文本，也不会更改可见元素。根据您对希望发生的事情的描述，您应该根据窗口的当前

滚动顶部
，隐藏/显示相关的
.nav-*
元素，您可以使用
切换（）
来实现，如下所示：

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

.nav-two{
/*这里的其他样式规则*/
显示：无；
}


请注意，我将
.nav two
元素的隐藏移到CSS中，以避免FOUC。
您正在更改类，而不是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();
    }
  });
});

您根本没有删除和添加元素。你只是在改变他们的课程。为什么这会对它们的内容产生任何影响？（比如说，CSS可见性/显示规则除外）您的问题不完整。在问题中发布完整必要的HTML、CSS和JavaScript，而不仅仅是链接。理想情况下，使用堆栈代码段（工具栏按钮
），因为它提供了一个很好的可运行示例，就在这里的现场。@T.J.Crowder它在JSFIDLE中。如果你放了太多的代码，stackoverflow会再次抱怨：代码必须在问题中，而不仅仅是链接。如果代码太多，这不是一个最小的完整的可验证示例，在JSFIDLE中发布太多代码并不比在这里发布好。为什么文本会改变？您的代码所做的只是添加/删除一个类
$(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() >= 1) {
      $('.nav-one').hide();
      $('.nav-two').show();
    } else {
      $('.nav-two').hide();
      $('.nav-one').show();
    }
  });
});