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

Question

所以我已经看了一些以前的答案，比如：

引导静态到固定导航条在滚动上跳跃

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

但他们似乎没有解决核心问题，即这一切看起来有多紧张。我在官方的引导程序导航栏文档和我放的第一个链接中添加了填充，但当它被修复时，它仍然会让人觉得不对劲。我希望有一种方法可以使向固定的转换尽可能顺利。

这是我的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