부트 스트랩 네비게이션 바/과민 효과

Question

그래서 나는 이미 같은 일부 이전 답변 보았다 :

bootstrap static to fixed navbar jumping on scroll

How to Bootstrap navbar static to fixed on scroll?

그러나 그들은 중앙 문제를 해결하지 않는 것 그 그것 모두가 얼마나 지저분한 지. 공식 부트 스트랩 navbar 워드 프로세서와 첫 번째 링크에서 말한대로 패딩을 추가했지만 고정 될 때 여전히 보입니다. 나는 가능한 한 매끄럽게되도록 고정으로 변환하는 방법이 있기를 바라고 있습니다.

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 여기

내 코드 내 jsfiddle입니다 당신이 페이지를 내려갈 때 점프에 관한 커브, navbar가 고정 될 때 그것은 매우 눈에.니다. 이 전환이 원활 해지기를 바랍니다. 자동 스크롤이 문제를 숨기므로 화살표를 클릭하지 마십시오.

감사합니다.

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