Question

我最近使用scrollspy插件实现了我的bootstrap导航。我可以注意到两个不同的问题：

当我滚动到顶部（在主页部分）时，scrollspy不会突出显示＆＃34; Home＆＃34;在酒吧。
当我在不同部分之间点击时，有时菜单会消失不到一秒钟，然后重新出现。

我做了一个小提琴：

HTML ：

<body>
    <header></header>
    <div class="container">
        <nav id="side-nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Brand</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#home">HOME</a></li>
                        <li><a href="#link1">LINK 1</a></li>
                        <li><a href="#link2">LINK 2</a></li>
                        <li><a href="#link3">LINK 3</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
        </div>
        <div class="row">
            <div class="resume text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
            </div>
        </div>
        <section id="link1">
            <div class="row title_section text-center" style="background-color:#87c0e4;">LINK 1</div>
            <div class="mini_title text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
        </section>
        <section id="link2">
            <div class="row title_section text-center" style="background-color:#87c0e4;">LINK 2</div>
            <div class="mini_title text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
        </section>
        <section id="link3">
            <div class="row title_section text-center" style="background-color:#87c0e4;">LINK 3</div>
            <div class="mini_title text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
        </section>
    </div>

的JavaScript ：

jQuery( document ).ready(function( $ ) {

    var myOffset = 50

    $("body").scrollspy({target: "#side-nav", offset:(myOffset+1)});

    $('[data-spy="scroll"]').each(function () {
        var $spy = $(this).scrollspy('refresh')
    })

    $('#link1').appear(function() {
        $(this).animate({'opacity':'1'},500);
    });
    $('#link2').appear(function() {
        $(this).animate({'opacity':'1'},500);
    });
    $('#link3').appear(function() {
        $(this).animate({'opacity':'1'},500);
    });

    $('.navbar-nav li a').click(function(){  
        $('#bs-example-navbar-collapse-1').collapse('hide');
    });

    //SCROLL MENU
    function scrollNav() {
        $('.nav a').click(function(){  
        //Toggle Class
        $(".active").removeClass("active");   
        $(this).closest('li').addClass("active");

        if ($(this).attr('href') == "#home") {
            $('html, body').stop().animate({scrollTop: 0}, 400);
        } else {
            $('html, body').stop().animate({scrollTop: $( $(this).attr('href') ).offset().top - myOffset}, 400);
        }
        return false;
    });
        $('.scrollTop a').scrollTop();
    }
    scrollNav();
    //END

});

CSS ：

body {
  padding-top: 150px;
  margin: 0 50px;
}

#link1, #link2, #link3, #link4 {
    opacity: 0
}

.title_section {
  margin-top:150px;
  margin-bottom:100px;
  color:white;
  padding: 10px;
  font-size: 30px;
  font-weight:400;
}


.mini_title {
    font-size: 18px;
    margin-bottom: 20px;
}

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: bottom;
}

.navbar .navbar-collapse {
  text-align: center;
}

Answer 1

您尚未指定您的ID =＆＃34; home＆＃34;代码中的任何位置。我想你应该这样说

<div class="row" id="home">
        <div class="resume text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </div>
    </div>

希望这有帮助。

Bootstrap scrollspy没有检测到home

1 个答案: