Question

我有一个单页网站，我希望菜单项在页面滚动时突出显示。我有以下JQuery但我不知道从哪里开始。

<script>
    $(function() {
        $('a[href*=#]:not([href=#])').click(function() {

            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');

                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top - 177
                    }, 1000);

                    return false;
                }
            }
        });
    });
</script>

菜单设置如下。我不确定这是否重要，但我在Wordpress中使用导航助行器。我希望有人能指出我正确的方向。

<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <button type="button" class="navbar-toggle" data-toggle="collapse" data- target=".navbar-1-collapse">
            <div class="menu-txt">Menu</div>
        </button>

        <div class="phone-h hidden-md hidden-lg">
            <span><img src="http://gr8students.wpengine.com/wp-content/themes/devdmbootstrap3/img/phone-h.png"></span>
        </div>
    </div>

    <div class="collapse navbar-collapse navbar-1-collapse">
        <ul id="menu-main-menu" class="nav navbar-nav">
            <li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4"><a title="How To Help" href="#howtohelp">How To Help</a></li>
            <li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5"><a title="Perks &amp; Programs" href="#perksprograms">Perks &amp; Programs</a></li>
            <li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6"><a title="Where To Give" href="#wheregive">Where To Give</a></li>
            <li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a title="The Process" href="#bloodgo">The Process</a></li>
            <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"><a title="Contact" href="#contact">Contact</a></li>
            <li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21"><a title="Stay In The Loop" href="#">Stay In The Loop</a></li>
            <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22"><a title="Check Your Stats" href="#">Check Your Stats</a></li>
        </ul>
    </div>
</nav>

Answer 1

Working solution on JS Fiddle

HTML

<section id="1">
    1
</section>
<section id="2">
    2
</section>
<section id="3">
    3
</section>
<section id="4">
    4
</section>
<div id="menu">
    <a href="#1">1</a>
    <a href="#2">2</a>
    <a href="#3">3</a>
    <a href="#4">4</a>
</div>

的jQuery

var timerid; //Used to fire scroll function once after scrolling is done.
$(document).ready(function(){
    $("#menu a").click(function(e){
        e.preventDefault();
        $("#menu a").removeClass('active');
        var id = $(this).attr("href").substring(1);
        $("body").animate({
            'scrollTop': $("section#" + id).offset().top
        });        
    });
    $("body").scrollTop(1); //forcing window scroll to execute on page load
    $(window).scroll(function(){
        clearTimeout(timerid);
        timerid = setTimeout(checkactivelink, 50);
    });

    function checkactivelink()
    {
        $("section").each(function(){
            if($("body").scrollTop() >= $(this).offset().top)
            {
                $("#menu a").removeClass('active');
                    $("#menu a[href=#" + $(this).attr("id") + "]").addClass('active');
            }
        });
    }
});

Answer 2

我建议你使用spyscroll in bootstrap你会注意到bootstrap使用与你计划使用的那个相同的侧面。

有一个question在较旧的版本中处理相同的问题

如果您仍然无法理解，我将发布一个jsfiddle示例

---修改

在这个example中你可以看到导航栏位于底部，因为我们没有空间可以将它放在一边。

将您的页面放到一边并导航到另一个，您需要创建像这样的3col和9col布局。

<div class="container">
<div class="row">
    <div class="col-md-3">
        <ul class="nav bs-docs-sidenav">
            ...
        </ul>
    </div>
    <div class="col-md-9">
        ...
    </div>
</div>

滚动时锚定突出显示

2 个答案: