Bootstrap Navbar от статического фиксированного пищевого содержимого/нервный эффект

Question

Так что я уже посмотрел на некоторых предыдущих ответы, как:

bootstrap static to fixed navbar jumping on scroll

How to Bootstrap navbar static to fixed on scroll?

Но они, кажется, не решить центральную проблему, как это выглядит странно. Я добавил добавку, как сказано в официальных загрузочных навигационных документах и ​​в первой ссылке, которую я положил, но она по-прежнему заставляет ее оторваться, когда она фиксируется. Я надеюсь, что есть способ сделать преобразование фиксированным максимально гладким.

Вот мой 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/

Проблема ос проскакивает при прыжке, когда вы идете по странице, когда navbar становится фиксированным, это очень заметно. Я бы хотел, чтобы этот переход был плавным. Не нажимайте стрелку, поскольку автоматическая прокрутка скрывает проблему.

Благодаря

Answer 1

эффект есть, потому что, когда вы делаете ваш нав фиксированный ваш другой контент сдвигается вверх.

Вы можете сделать еще один элемент, который будет иметь ту же высоту, что и ваш навигатор, и отображать его только тогда, когда nav фиксирован.

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