Question

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

请在给我减去之前帮助我。

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

赞：http://stanhub.com/tutorials/change-active-state-in-sticky-navigation-on-scroll/ 或者像：https://www.trustwave.com/Services/Managed-Security/Threat-Correlation-Services/

我试图用我的js代码操纵它们但是我无法改变它们。他们卡住了！

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

#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>

runtime ":database-migration:1.2.1"
compile ':twitter-bootstrap:2.3.1'
compile ":lesscss-resources:1.3.3"
compile ":grails-melody:1.56.0"

请帮帮我。

谢谢。

Answer 1

    <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更改列表类

1 个答案: