javascript - 在当前类(class)中添加一个具有相同 3 类(class)的类(class)

Question

大家好，这是我的代码，我在一页中有相同的三个类。

当我向上滚动时，我只希望具有子类 wrap-dropdown 的当前事件父菜单具有固定的类。

var winScrolltop = $(window).scrollTop(),
  up = false,
  newScroll,
  $target = $('.wrap-dropdown'),
  topTarget = $target.offset().top;

$(window).on('scroll', function() {
  newScroll = $(window).scrollTop();
  if ((newScroll > winScrolltop) && !up) {
    $target.removeClass('fixed');
    up = !up;
  } else if (newScroll < winScrolltop && up) {
    $target.addClass('fixed');
    up = !up;
  }
  winScrolltop = newScroll;
});

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="top-menu" class="nav navbar-nav navbar-left"><li id="menu-item-100" class="dropdown menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-84 current_page_item menu-item-has-children menu-item-100 active"><a href="http://wasser.dev/sanitary-fittings/">Sanitary &amp; Fittings</a>
<div class="wrap-dropdown" style="width: 1339px; left: -285px;"><ul class="sub-menu dropdown-menu animated">
    <li id="menu-item-744" class="dropdown menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-744"><a href="http://wasser.dev/category/sanitary-fittings/sanitary-wares/" class="dropdown-toggle">Sanitary Wares</a>
        <ul class="sub-menu dropdown-menu animated" style="padding-left: 22px;">
            <li id="menu-item-526" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-526"><a href="http://wasser.dev/category/sanitary-fittings/sanitary-wares/toilet-urinals/">Toilet &amp; Urinals</a></li>
            <li id="menu-item-525" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-525" style="float: left;"><a href="http://wasser.dev/category/sanitary-fittings/sanitary-wares/basin/">Basin</a></li>
        </ul>
    </li>
    <li id="menu-item-123" class="dropdown menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-123"><a href="http://wasser.dev/category/sanitary-fittings/fittings/" class="dropdown-toggle">Fittings</a>
    <ul class="sub-menu dropdown-menu animated mega-menu">
        <li id="menu-item-421" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-421" style="float: left;"><a href="http://wasser.dev/category/sanitary-fittings/fittings/faucets/">FAUCETS</a>
            <ul class="sub-menu mega-menu" style="list-style-type: none; margin: 0px; padding: 0px;">
                <li id="menu-item-425" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-425 hasChild"><i class="fa fa-caret-right"></i><a href="http://wasser.dev/category/sanitary-fittings/fittings/faucets/collections/" style="text-transform: none; font-weight: normal;">Collections</a>
                <ul class="sub-menu mega-menu">
                    <li id="menu-item-517" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-517"><a href="http://wasser.dev/category/sanitary-fittings/fittings/faucets/collections/classic/" style="text-transform: none; font-weight: normal;">Classic</a></li>
                    <li id="menu-item-518" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-518"><a href="http://wasser.dev/category/sanitary-fittings/fittings/faucets/collections/contemporer/" style="text-transform: none; font-weight: normal;">Contemporer</a></li>
                    <li id="menu-item-519" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-519"><a href="http://wasser.dev/category/sanitary-fittings/fittings/faucets/collections/exclusive/" style="text-transform: none; font-weight: normal;">Exclusive</a></li>
                    <li id="menu-item-520" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-520"><a href="http://wasser.dev/category/sanitary-fittings/fittings/faucets/collections/fashion/" style="text-transform: none; font-weight: normal;">Fashion</a></li>
                    <li id="menu-item-521" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-521"><a href="http://wasser.dev/category/sanitary-fittings/fittings/faucets/collections/minimalist/" style="text-transform: none; font-weight: normal;">Minimalist</a></li>
                    <li id="menu-item-522" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-522"><a href="http://wasser.dev/category/sanitary-fittings/fittings/faucets/collections/monochrome/" style="text-transform: none; font-weight: normal;">Monochrome</a></li>
                </ul>
                </li>
                <li id="menu-item-426" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-426"><a href="http://wasser.dev/category/sanitary-fittings/fittings/faucets/shower/" style="text-transform: none; font-weight: normal;">Shower</a></li>
                <li id="menu-item-424" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-424"><a href="http://wasser.dev/category/sanitary-fittings/fittings/faucets/bath/" style="text-transform: none; font-weight: normal;">Bath</a></li>
                <li id="menu-item-427" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-427"><a href="http://wasser.dev/category/sanitary-fittings/fittings/faucets/basin-en/" style="text-transform: none; font-weight: normal;">Basin</a></li>
                <li id="menu-item-428" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-428"><a href="http://wasser.dev/category/sanitary-fittings/fittings/faucets/faucets-kitchen/" style="text-transform: none; font-weight: normal;">Kitchen</a></li>
            </ul>
        </li>
        <li id="menu-item-423" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-423" style="float: left;"><a href="http://wasser.dev/category/sanitary-fittings/fittings/taps/">TAPS</a>
            <ul class="sub-menu mega-menu" style="list-style-type: none; margin: 0px; padding: 0px;">
                <li id="menu-item-431" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-431"><a href="http://wasser.dev/category/sanitary-fittings/fittings/taps/walls/" style="text-transform: none; font-weight: normal;">Walls</a></li>
                <li id="menu-item-430" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-430"><a href="http://wasser.dev/category/sanitary-fittings/fittings/taps/deck/" style="text-transform: none; font-weight: normal;">Deck</a></li>
                <li id="menu-item-429" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-429"><a href="http://wasser.dev/category/sanitary-fittings/fittings/taps/concealed/" style="text-transform: none; font-weight: normal;">Concealed</a></li>
            </ul>
        </li>
        <li id="menu-item-422" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-422" style="float: left;"><a href="http://wasser.dev/category/sanitary-fittings/fittings/shower-fittings/">SHOWER FITTINGS</a>
            <ul class="sub-menu mega-menu" style="list-style-type: none; margin: 0px; padding: 0px;">
                <li id="menu-item-433" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-433"><a href="http://wasser.dev/category/sanitary-fittings/fittings/shower-fittings/showers/" style="text-transform: none; font-weight: normal;">Showers</a></li>
                <li id="menu-item-432" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-432"><a href="http://wasser.dev/category/sanitary-fittings/fittings/shower-fittings/jet-shower/" style="text-transform: none; font-weight: normal;">Jet Shower</a></li>
            </ul>
        </li>
    </ul>
    </li>
    <li id="menu-item-124" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-124"><a href="http://wasser.dev/category/sanitary-fittings/kitchen/" class="dropdown-toggle">Kitchen</a></li>
    <li id="menu-item-746" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-746"><a href="http://wasser.dev/category/sanitary-fittings/accessories/" class="dropdown-toggle">Accessories</a></li>
    <li id="menu-item-884" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-884"><a href="http://wasser.dev/category/sanitary-fittings/others/" class="dropdown-toggle">Others</a></li>
</ul></div>
</li>
<li id="menu-item-99" class="dropdown menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-99"><a href="http://wasser.dev/water-heater/">Water Heater</a>
<div class="wrap-dropdown" style="width: 1339px; left: -471.547px;"><ul class="sub-menu dropdown-menu animated">
    <li id="menu-item-129" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-129"><a href="http://wasser.dev/category/water-heater/single-point/" class="dropdown-toggle">Single Point</a></li>
    <li id="menu-item-128" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-128"><a href="http://wasser.dev/category/water-heater/multiple-point/" class="dropdown-toggle">Multiple Point</a></li>
</ul></div>
</li>
<li id="menu-item-98" class="dropdown menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-98"><a href="http://wasser.dev/water-pump/">Water Pumps</a>
<div class="wrap-dropdown" style="width: 1339px; left: -622.859px;"><ul class="sub-menu dropdown-menu animated">
    <li id="menu-item-135" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-135"><a href="http://wasser.dev/category/water-pumps/shallow-well-pumps/" class="dropdown-toggle">Shallow Well Pumps</a></li>
    <li id="menu-item-134" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-134"><a href="http://wasser.dev/category/water-pumps/semi-jet-pumps/" class="dropdown-toggle">Semi Jet Pumps</a></li>
    <li id="menu-item-131" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-131"><a href="http://wasser.dev/category/water-pumps/deep-well-pumps/" class="dropdown-toggle">Deep Well Pumps</a></li>
    <li id="menu-item-132" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-132"><a href="http://wasser.dev/category/water-pumps/deep-well-submersible-pumps/" class="dropdown-toggle">Deep Well Submersible Pumps</a></li>
    <li id="menu-item-130" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-130"><a href="http://wasser.dev/category/water-pumps/booster-pumps/" class="dropdown-toggle">Booster Pumps</a></li>
    <li id="menu-item-136" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-136"><a href="http://wasser.dev/category/water-pumps/submersible-pumps/" class="dropdown-toggle">Submersible Pumps</a></li>
    <li id="menu-item-133" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-133"><a href="http://wasser.dev/category/water-pumps/accesories/" class="dropdown-toggle">Accesories</a></li>
</ul></div>
</li>
</ul>

fixed 类总是添加到所有三个 wrap-dropdown 中。我如何让它只添加固定在当前事件 wrap-dropdown 中的类？

我尝试使用 $(".wrap-dropdown", this).addClass("fixed"); 但它不起作用。

请帮忙，谢谢。

Answer 1

案例结束我改变了目标类，这里是代码:

               var winScrolltop = $(window).scrollTop(),
                    up = false,
                    newScroll,
                    $target = $('#top-menu>li.active>.wrap-dropdown'),
                    topTarget = $target.offset().top;


                $(window).on('scroll', function () {
                    newScroll = $(window).scrollTop();
                    if ((newScroll > winScrolltop) && !up) {
                        $target.removeClass('fixed');
                        up = !up;
                    } else if (newScroll < winScrolltop && up) {
                        $target.addClass('fixed');
                        up = !up;
                    }
                    // $('#top-menu>li.active>.wrap-wdown').parent().hasClass('active');
                    winScrolltop = newScroll;
                });

感谢@omerBonfil 的帮助