将导航栏从静态引导到固定的进餐内容/抖动效果

Question

所以我已经看过一些以前的答案，例如：

从静态引导到固定导航栏，滚动滚动

如何将导航栏静态引导到滚动固定？

但是他们似乎并没有解决核心问题，即所有问题看起来多么令人不安。 我已经在官方的引导程序navbar文档和我放置的第一个链接中添加了填充，但是当它变得固定时，它仍然使它看起来很空白。 我希望有一种方法可以使固定转换尽可能顺利。

这是我的jsfiddle和我的代码：

JS：

//Adds smooth scrolling to page start
$("#scrollToMain a").on("click", function (e) {
    e.preventDefault();
    var hash= this.hash;
    $('html, body').animate({
        scrollTop: $(hash).offset().top
    }, 700, function() {
        window.location.hash = hash;
    });
});

$(window).scroll(function () {
    //Checks to see if the nav button is fully visible
    if(!$("#scrollToMain").visible(true)) {
        $(".navbar").addClass("navbar-fixed-top");
    } else {
        $(".navbar").removeClass("navbar-fixed-top");
    }
});

HTML：

 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
              <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
              </form>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>


        <div class="jumbotron" id="startContent" style="width:100%; background-color:yellow;"><h1>I am here now</h1>
        <h1>Me too</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1></div>

https://jsfiddle.net/6z492Lry/

向下浏览页面时，跳转时会出现问题，导航栏固定后，这非常明显。 我希望这种过渡是顺利的。 不要单击箭头，因为自动滚动会隐藏问题。

谢谢

Answer 1

之所以有这种效果，是因为当您固定导航时，其他内容会上移。

您可以制作另一个与导航相同高度的元素，并仅在导航固定时显示它。

的CSS

.navbar-fill-space {
  height: 50px;
}

的HTML

<div class="navbar-fill-space hidden"></div>        
<nav class="navbar navbar-inverse navbar-transparent">

JS

$(window).scroll(function () {
    //Checks to see if the nav button is fully visible
    if(!$("#scrollToMain").visible(true)) {
        $(".navbar").addClass("navbar-fixed-top");
        $(".navbar-fill-space").removeClass("hidden");
    } else {
        $(".navbar").removeClass("navbar-fixed-top");
        $(".navbar-fill-space").addClass("hidden");
    }
});

jsFiddle