Question

问题很简单，我使用bootstrap scrollspy制作网站。我在固定导航栏上有4个导航项目。如果我点击它们，除了最后一个，它们都会显示在正确的位置。我尝试添加一个项目，但总是第四个有问题。如果我滚动到项目，它会在导航栏上正确显示。

EventDates

CSS

    <body data-spy="scroll" data-target=".navbar" data-offset="60">
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <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="#">Test</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#section1">1</a></li>
                    <li><a href="#section2">2</a></li>
                    <li><a href="#section3">3</a></li>
                    <li><a href="#section4">4</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container-fluid" id="section1">
        <div class="starter-template">
            <h1>1</h1>
            <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
        </div>
    </div>
    <div class="container-fluid" id="section2">
        <div class="starter-template">
            <h1>2</h1>
            <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
        </div>
    </div>
    <div class="container-fluid" id="section3">
        <div class="starter-template">
            <h1>3</h1>
            <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
        </div>
    </div>
    <div class="container-fluid" id="section4">
        <div class="starter-template">
            <h1>4</h1>
            <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
var offset = 60;

$('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
});
    </script>
    </body>

＆＃13;

body {
    margin-top: 60px;
    position: relative;
}
#section1, #section2, #section3, #section4 {
    padding-top:60px;
    height:500px;
    color: #fff;
    background-color: #1e88e5;
}

＆＃13;

var offset = 60;

$('.navbar li a').click(function(event) {
  event.preventDefault();
  $($(this).attr('href'))[0].scrollIntoView();
  scrollBy(0, -offset);
});

＆＃13;

body {
  margin-top: 60px;
  position: relative;
}
#section1,
#section2,
#section3,
#section4 {
  padding-top: 60px;
  height: 500px;
  color: #fff;
  background-color: #1e88e5;
}

＆＃13;

Answer 1

看起来你的javascript运行不正常。相反，使用偏移量，您只需将填充添加到节容器中即可。

#section1, #section2, #section3, #section4 {
    height:500px;
    color: #fff;
    background-color: #1e88e5;
    padding-top: 100px;
}

要在第一次加载时修正高度问题，只需移除你身体css的边缘顶部。

body {
    position: relative;
}

这是 JSFiddle

Bootstrap Scrollspy - 上一个导航项目不会打开正确的位置

1 个答案: