删除课程，然后添加回来

Question

我在下面列出了标题导航，添加到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>

jQuery的

var nav = $(".nav");
var pos = nav.position();
$(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    if (windowpos >= pos.top) {
        nav.css({
            'position': 'fixed'
        }).addClass("sticky");
    } else {
        nav.css({
            'position': 'relative'
        }).removeClass("sticky");
    }
});

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

Answer 1

1. 当您可以在类规则中完成所有这些.addClass时，请勿组合使用jquery .css和.addClass 。
2. 您只需要1个班级， .sticky可以使用.sticky来申请职位：固定； 和顶部：0; 到<ul>元素。

使用.toggleClass添加.sticky ，无需为position: relative;添加任何CSS或类position: relative; 或者当他们向上滚动页面时，只需删除类.sticky

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

并将CSS用于.sticky类：

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

因此，使用这种方法，它将仅在页面向下滚动时添加sticky类，而当页面向上滚动时，它将自动删除该类。

目前尚不清楚$(".nav")在上面的jQuery代码中代表什么。 如果您引用的是HTML 5 <nav>元素，那么如果删除，则上面的代码应该可以使用. 从任何地方都说$(".nav") ，所以它将变成$("nav")

Answer 2

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

HTML

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

JS，当您滚动回到顶部时

  jQuery('#menu-left-main-nav li, #menu-right-main-nav li').each(function() {
      var originalclass = jQuery(this).data('icon');
      jQuery(this).addClass(originalclass);
  });

Answer 3

您可以将自定义数据属性添加到将包含适当的类名称的li标记中，然后按如下所示添加和删除它。

HTML

<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>

JS

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

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

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