导致滚动到div问题的JQuery NavBar代码

Question

问题背景：

我有一个标准的bootstrap NavBar，可以碰撞移动设备上的按钮。

问题：

当用户点击NavBar下拉列表中的某个项目时，该页面将向下滚动到相应的div。当项目被点击时，我有一个JQuery会压缩下拉菜单。

没有 JQuery关闭下拉导航菜单，页面向下滚动到div而没有任何问题。 使用 JQuery页面向下滚动但在设置的10px偏移后停止。

没有JQuery菜单关闭代码 - 工作：

请注意面板项目上方的小10px，这是您想要的。

使用JQuery结束代码 - 破解：

请注意，页面现在向下滚过div的顶部。

守则：

导航栏：

 <div class="navbar">
        <nav class="navbar navbar-default navbarColour" role="navigation" id="nav">
            <div class="container">
                <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>
                    <img src="~/Images/DC.png" class="dc">
                </div>
                <div class="middleNavPadding">
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav pull-right">
                            <li><a href="#" class="scroll-link" data-id="Info">Services</a></li>
                            <li><a href="#" class="scroll-link" data-id="Mission">Our Mission</a></li>
                            <li><a href="#" class="scroll-link" data-id="Gallery">Projects Gallery</a></li>
                            <li><a href="#" class="scroll-link" data-id="Contact">Contact Us</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
    </div>

JQuery菜单关闭代码：

$(document).ready(function () {
    $(".navbar-nav .scroll-link").click(function (event) {
        $(".navbar-collapse").collapse('hide');
    });
});

JQuery用于滚动到NavBar菜单中设置的Div：

$(document).ready(function () {
    $('.scroll-link').on('click', function (event) {
        event.preventDefault();

        var sectionID = $(this).attr("data-id");

        scrollToID('#' + sectionID, 750);
  });
    function scrollToID(id, speed) {
        var offSet = 10;
        var targetOffset = $(id).offset().top - offSet;
        $('html,body').animate({ scrollTop: targetOffset }, speed);
    }
});

小组的HTML标记：

<div id="Info">

    //panel HTML

</div>

我认为问题在于JQuery正在设置＆＃39; top＆＃39;页面作为下拉菜单的底部，然后导致错误的偏移。解决这个问题的任何帮助都将非常受欢迎。

Answer 1

您走在正确的轨道上，只需将height的{​​{1}}添加到您的偏移量中。

#bs-example-navbar-collapse-1

这应该有用。