將導航欄從靜態引導到固定的進餐內容/抖動效果

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