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、position: fixed; を適用することです。そして上：0; <ul>要素に。

.toggleClassを追加するために使用し.stickyます。CSS やクラスを追加する必要はありませんposition: relative;。ページを上にスクロールするときは、クラスを削除するだけです。.sticky

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

.sticky のクラスに CSS を使用します。

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

したがって、このアプローチではsticky、ページが下にスクロールされるとクラスが追加され、上にスクロールされるとクラスが自動的に削除されます。

$(".nav")上記の jQuery コードで何が表されているかは明確ではありません。HTML 5<nav>要素を参照している場合、上記のコードが機能するはず.です$(".nav")。$("nav")

于 2013-09-10T00:34:15.033 に答える
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 に答える
0

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);
  });
于 2013-09-10T00:32:35.390 に答える