0

我有一个下面列出的标题导航，并且添加到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 将是动态的，但类不会。

4

3 回答 3

1
  1. 不要结合 jquery.css以及.addClass何时可以在类规则中执行所有操作。
  2. 您只需要 1 个班级，即.sticky申请职位：固定；和顶部：0；到<ul>元素。

用于.toggleClass添加.sticky，无需添加任何 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")

于 2013-09-10T00:34:15.033 回答
0

您可以使用 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);
  });
于 2013-09-10T00:32:35.390 回答
0

您可以将自定义数据属性添加到将包含适当类名的 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);
于 2013-09-10T00:38:03.847 回答