Javascript 删除类，然后重新添加

下面列出了标题导航，添加到

li

的类创建了一个图标

向下滚动时，我希望能够完全删除该类；向后滚动到页面顶部时，我希望能够分辨哪个类属于哪个项目，并将该类添加回

我想我可能需要将它们存储到变量中。请记住，这些菜单项是动态的，如果被删除，它们可能会更改

HTML

<ul id="menu-left-main-nav" class="main-left-nav nav-bar hide-for-small">
    <li id="menu-item-37" class="customicon-shop"><a href="http://localhost:8888/shop/">Shop</a></li>
    <li id="menu-item-35" class="customicon-contact"><a href="http://localhost:8888/account/">Account</a></li>
    <li id="menu-item-36" class="customicon-apps"><a href="http://localhost:8888/apps-entertainment/">Apps &amp; Entertainment</a></li>
</ul>

<ul id="menu-right-main-nav" class="main-right-nav nav-bar hide-for-small">
    <li id="menu-item-61" class="customicon-about"><a href="http://localhost:8888/about/">About</a></li>
    <li id="menu-item-62" class="customicon-support"><a href="http://localhost:8888/support/">Support</a></li>
    <li id="menu-item-63" class="customicon-why"><a href="http://localhost:8888/why/">Why?</a></li>
</ul>

<ul id="menu-left-main-nav" class="main-left-nav nav-bar hide-for-small">
    <li id="menu-item-37" data-icon-class="customicon-shop"><a href="http://localhost:8888/shop/">Shop</a></li>
    <li id="menu-item-35" data-icon-class="customicon-contact"><a href="http://localhost:8888/account/">Account</a></li>
    <li id="menu-item-36" data-icon-class="customicon-apps"><a href="http://localhost:8888/apps-entertainment/">Apps &amp; Entertainment</a></li>
</ul>

<ul id="menu-right-main-nav" class="main-right-nav nav-bar hide-for-small">
    <li id="menu-item-61" data-icon-class="customicon-about"><a href="http://localhost:8888/about/">About</a></li>
    <li id="menu-item-62" data-icon-class="customicon-support"><a href="http://localhost:8888/support/">Support</a></li>
    <li id="menu-item-63" data-icon-class="customicon-why"><a href="http://localhost:8888/why/">Why?</a></li>
</ul>

---

如果您查看代码，id将是动态的，但类不会是动态的。

您可以使用jQuery的数据函数在任何元素中存储任意数据

HTML

如果可以在类规则中完成所有操作，请不要将jquery

.css

和

.addClass

组合在一起

您只需要一个类，即

。sticky

来应用位置：fixed；和top:0；到

元素

使用

.toggleClass

添加

.sticky

，无需为

位置：相对添加任何css或类

或者当他们向上滚动页面时，只需删除类

。sticky

$(window).scroll(function() {
  var pos = $(".nav").position();
  $(".nav").toggleClass('sticky', $(window).scrollTop() > pos.top);
});

并对.sticky类使用CSS：

.sticky {
    position: fixed;
    top: 0;
}

因此，使用这种方法，当页面向下滚动时，它只需添加

sticky

类，当它们向上滚动时，它会自动删除该类

---

不清楚上面的jQuery代码中，

$（“.nav”）

代表了什么。如果您引用的是HTML5

元素，那么上面的代码应该可以工作，如果您将

从它表示

$（“.nav”）

的任何地方删除，那么它将成为

$（“nav”）

您可以向包含适当类名的li标记添加自定义数据属性，然后按如下方式添加和删除它

HTML

<ul id="menu-left-main-nav" class="main-left-nav nav-bar hide-for-small">
    <li id="menu-item-37" class="customicon-shop"><a href="http://localhost:8888/shop/">Shop</a></li>
    <li id="menu-item-35" class="customicon-contact"><a href="http://localhost:8888/account/">Account</a></li>
    <li id="menu-item-36" class="customicon-apps"><a href="http://localhost:8888/apps-entertainment/">Apps &amp; Entertainment</a></li>
</ul>

<ul id="menu-right-main-nav" class="main-right-nav nav-bar hide-for-small">
    <li id="menu-item-61" class="customicon-about"><a href="http://localhost:8888/about/">About</a></li>
    <li id="menu-item-62" class="customicon-support"><a href="http://localhost:8888/support/">Support</a></li>
    <li id="menu-item-63" class="customicon-why"><a href="http://localhost:8888/why/">Why?</a></li>
</ul>

<ul id="menu-left-main-nav" class="main-left-nav nav-bar hide-for-small">
    <li id="menu-item-37" data-icon-class="customicon-shop"><a href="http://localhost:8888/shop/">Shop</a></li>
    <li id="menu-item-35" data-icon-class="customicon-contact"><a href="http://localhost:8888/account/">Account</a></li>
    <li id="menu-item-36" data-icon-class="customicon-apps"><a href="http://localhost:8888/apps-entertainment/">Apps &amp; Entertainment</a></li>
</ul>

<ul id="menu-right-main-nav" class="main-right-nav nav-bar hide-for-small">
    <li id="menu-item-61" data-icon-class="customicon-about"><a href="http://localhost:8888/about/">About</a></li>
    <li id="menu-item-62" data-icon-class="customicon-support"><a href="http://localhost:8888/support/">Support</a></li>
    <li id="menu-item-63" data-icon-class="customicon-why"><a href="http://localhost:8888/why/">Why?</a></li>
</ul>

---

为什么不在li项目中添加一个悬停状态，并在此基础上隐藏或显示图标呢？顺便问一下，你看过scrollspy了吗？如果我正确理解了您的问题，您希望突出显示用户当前滚动经过的菜单部分，对吗？

class=“nav”

没有任何定义，我很好奇它是否会滚动到视图之外，为什么您需要删除它？

，菜单左主导航

没有选择任何内容

$（“#menu-item-61”）

动态id，每个音符都会有所不同是的，我想这会让你开始。您还可以使用“.nav bar li”作为选择器。要回答每个人的问题，滚动效果很好，标题会变粘，所以这不是问题所在。问题是，当我向下滚动页面并且页眉变粘时，我想删除

项的类，从这个意义上讲，它会删除web字体。nav的代码是这样的

，也就是说，我很好奇如何存储每个列表项中的类，当向下滚动时，我用jQuery删除了所有的类，我有，但是，当滚动到页面顶部时，我需要将这些类添加回页面。有人有任何输入吗？您可能在正确的轨道上，请不要喊“不请”。@Markschultheis我最初也这么认为。但很明显，他想用子弹。而不是1。他用了#1。编辑。哎呀，我不知道那是一声喊叫。。。我的错。只是用了一个数字标签，不知道它会引起呼喊。对不起…@SolomonClosson别担心。编辑。现在，如果我们能找出OP代码中的

.nav

实际上是什么。

<ul id="menu-left-main-nav" class="main-left-nav nav-bar hide-for-small">
    <li id="menu-item-37" data-icon-class="customicon-shop"><a href="http://localhost:8888/shop/">Shop</a></li>
    <li id="menu-item-35" data-icon-class="customicon-contact"><a href="http://localhost:8888/account/">Account</a></li>
    <li id="menu-item-36" data-icon-class="customicon-apps"><a href="http://localhost:8888/apps-entertainment/">Apps &amp; Entertainment</a></li>
</ul>

<ul id="menu-right-main-nav" class="main-right-nav nav-bar hide-for-small">
    <li id="menu-item-61" data-icon-class="customicon-about"><a href="http://localhost:8888/about/">About</a></li>
    <li id="menu-item-62" data-icon-class="customicon-support"><a href="http://localhost:8888/support/">Support</a></li>
    <li id="menu-item-63" data-icon-class="customicon-why"><a href="http://localhost:8888/why/">Why?</a></li>
</ul>

var $listItems = $('.nav-bar li'),
    itemIconClass = $listItem.attr('data-icon-class');

// add class
$listItem.addClass(itemIconClass);

// remove class
$listItem.removeClass(itemIconClass);