单击或滚动div更改列表类 [英] change list class on click or scroll div

问题描述

我知道在线和stackoverflow中都有很多问题和答案..但是我无法解决我的问题...

I know there is lot of question and answer in online and stackoverflow.. but I can't solve my problem...

请帮我减负.

当有人单击菜单或滚动时，我需要更改活动列表的背景.

I need to change the active list background when someone click in menu or scroll..

例如: http://stanhub.com /tutorials/change-active-state-in-sticky-navigation-scroll//a 或类似: https://www.trustwave.com/Services/Managed -安全性/威胁相关服务/

Like: http://stanhub.com/tutorials/change-active-state-in-sticky-navigation-on-scroll/ or like: https://www.trustwave.com/Services/Managed-Security/Threat-Correlation-Services/

我试图用我的js代码来操作它们.但是我无法更改它们.他们卡住了！

I tried to manipulate them with my js code.. but I'm unable to changes them. they stuck !

这是我的代码: http://codepen.io/anon/pen/dozJqw

jQuery("document").ready(function($){
var pos = $('.inner-page-nav').offset().top;
var nav = $('.inner-page-nav');

$(window).scroll(function () {
if ($(this).scrollTop() > pos) {
	nav.addClass("f-nav");
	(".inner-page-nav").fadeIn(3000);
	('.inner-page-nav').addClass("f-nav");
} else {
	nav.removeClass("f-nav");
}
});
});
$(document).on('click','.scroll_to', function(event) {
    event.preventDefault();
    var target = "#" + this.getAttribute('data-more-info');
    $('html, body').animate({
        scrollTop: $(target).offset().top - 60 }, 2000);
});

#page-nav-link{list-style:none;}
#page-nav-link li{float:left;}
.inner-page-nav{ background: #128DC3;}
.f-nav{ z-index: 2900; position: fixed; left: 0; top: 0; width: 100%;margin-top:0px;background:#128DC3;} /* this make our menu fixed top */
.page-nav-content {height: 42px;margin: 0 auto;max-width: 1170px;width: 100%;}
.page-nav-content ul { list-style: none;margin: 0; }
.page-nav-content ul li{float: left; margin: 0px 2px; padding: 10px 70px !important;}
.navActive{background:#4ccbff;}
.navActive a{color:#fff;}
.page-nav-content ul li:hover{background:#4ccbff;}
.page-nav-content ul li:hover a{color:#fff;}
.page-nav-content ul li a {font-size: 25px;line-height: 25px;}
.page-nav-content ul li a:hover {text-decoration:none;color:#fff;}
.clear{clear:both;}
a.scroll_to{
    color:#fff;
    cursor:pointer;
    display: inline-block;
}
.box{width:100%;min-width:100px;height:500px;font-size:25px;color:#000;float:left;}
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
.yellow{background:yellow;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="inner-page-nav" id="inner-page-nav">
    <div class="page-nav-content">
        <ul>
            <li class="navActive"><a data-more-info="navOverview" href="#" class="scroll_to">Overview</a></li>
            <li><a data-more-info="navFeatures" href="#" class="scroll_to">Features</a></li>
            <li><a data-more-info="navWhiteBro" href="#" class="scroll_to">Whitepaper &amp; Brochure</a></li>
            <li><a data-more-info="navOrder" href="#" class="scroll_to">Order</a></li>
        </ul>
        <div class="clear"></div>
    </div>
</div>
<div id="navOverview" class="box red">Overview</div>
<div id="navFeatures" class="box green">Features</div>
<div id="navWhiteBro" class="box blue">Brochure</div>
<div id="navOrder" class="box yellow">Order</div>
<div class="clear"></div>

请帮助我.

谢谢.

推荐答案

    <script>
    var topMenu = $("#inner-page-nav"),
        topMenuHeight = topMenu.outerHeight()+15,
        // All list items
        menuItems = topMenu.find("a"),
        // Anchors corresponding to menu items
        scrollItems = menuItems.map(function(){
          var item = $($(this).attr("data-more-info"));
          if (item.length) { return item; }
        });

    // Bind to scroll
    $(window).scroll(function(){
       // Get container scroll position
       var fromTop = $(this).scrollTop()+topMenuHeight;

       // Get id of current scroll item
       var cur = scrollItems.map(function(){
         if ($(this).offset().top < fromTop)
           return this;
       });
       // Get the id of the current element
       cur = cur[cur.length-1];
       var id = cur && cur.length ? cur[0].id : "";
       // Set/remove active class
       menuItems.parent().removeClass("navActive").end().filter("[href=#"+id+"]").parent().addClass("navActive");
    });
 </script>  try this

这篇关于单击或滚动div更改列表类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！