刪除課程，然后添加回來

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