在当前课程中添加一个同一班级的班级

大家好，这里是我的代码，我在一个页面里有三个班级。在当前课程中添加一个同一班级的班级

当我向上滚动时，我只是想要当前活动的父级菜单，其子级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>

始终被添加到所有三个wrap-dropdown类fixed。我如何才能添加固定在当前活动的wrap-dropdown中的类？

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

请帮忙，谢谢。

来源

2017-01-23 Eko Bayu

你如何三个区分？你怎么知道哪一个是主动的？ –

@OmerBonfil看起来，OP想要根据它是否在视口中来区分，看看代码。 – Ohgodwhy

@OmerBonfil这就是它。所以我必须添加新的课程活动？ –

结案更改目标类，这里是代码：

   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

来源

2017-01-24 04:05:27

在当前课程中添加一个同一班级的班级

回答

相关问题