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

如果您可以在类规则中执行此操作，请不要将jquery .css和.addClass组合在一起。
你只需要1个班级，.sticky就可以申请这个职位：固定;和顶部：0;到<ul>元素。

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

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

并使用CSS作为.sticky的类：

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

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

目前尚不清楚上面的jQuery代码中$(".nav")代表什么。如果您引用的是HTML 5 <nav>元素，则上述代码应该有效，如果您从.的所有位置删除$(".nav")，那么它将成为$("nav")

Answer 2

您可以使用jQuery的数据函数

在任何元素中存储任意数据

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

删除类然后添加回来

3 个答案: