引導導航欄，以固定的進食量/風聲鶴唳的效果

Question

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

bootstrap static to fixed navbar jumping on scroll

How to Bootstrap navbar static to fixed on scroll?

但他們似乎沒有解決的中心問題是這一切看起來是多麼的緊張。我已經在官方bootstrap導航欄文檔和第一個鏈接中添加了填充，但在固定時它仍會使其顯示出來。我希望有一種方法可以將轉換固定爲儘可能平滑。

這是我的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/

問題OC當你走下頁面時，在跳轉時詛咒，當導航欄變得固定時，它非常明顯。我希望這個過渡是平穩的。當自動滾動隱藏問題時，不要單擊箭頭。

謝謝

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