끈적 끈적한 navbar가 콘텐츠를 다시 도약시킵니다.

Question

머리글, navbar 및 내용으로 간단한 사이트를 설정하십시오. 페이지가 네비게이션 막대에 도달하면 네비게이션 막대가 페이지 상단에 위치하도록 위치가 고정됩니다.이 시점에서 네비게이션 높이가 조금 더 작아집니다 (이 효과가 마음에 듭니다) .- 별도의 클래스를 추가하여이 작업을 수행했습니다. 고정되고 navbar에 더 얇은.

대부분의 사람들은 인라인 요소에 "position : fixed"를 추가 할 때 발생하는 문제에 대해 알고 있습니다. 콘텐츠가 갑자기 위쪽으로 "뛰어 오르는"점입니다. 이것을 막기 위해 navbar가 고정 될 때까지 감추어 져있는 div 인 "stop_the_jump"를 추가했습니다.이 지점은 그 지점에 표시됩니다. 이 모든 것이 진행되는 동안 부드럽게 진행되지만 뒤로 스크롤하면 네비게이션 막대가 더 얇아 졌기 때문에 점프가 발생합니다.

나는이 머리카락을 머리카락 밖으로 끌어 내고 있는데, 어떻게 돌아가는 길에서 일어나는이 점프를 제거 할 수 있습니까? 여기

명확하게 내 문제를 보여주는 JSFiddle입니다 :

$(window).scroll(function() {  

var Scroll = $(window).scrollTop(); 
var ScrollFXfullHeight = $('.header-wrapper').height(); 

if (Scroll == ScrollFXfullHeight) { 

$("#navigation").addClass("fixed"); 
$(".stop_the_jump").css('display','block'); 

} else if (Scroll > ScrollFXfullHeight) { 
if(!$("#navigation").hasClass('fixed')) { 
    $(".stop_the_jump").css('display','block'); 
    $("#navigation").addClass("fixed"); 
} 
$("#navigation").addClass("thinner"); 
} else { 
$("#navigation").removeClass("thinner fixed"); 
$(".stop_the_jump").removeClass("thinner"); 
$(".stop_the_jump").css('display','none'); 
} 
}); 

어떤 도움이 많이 주시면 감사하겠습니다 다음과 같이 http://jsfiddle.net/gnac14qa/

내 jQuery 코드입니다.

Answer 1

좋아, 그래서 위의 답변을 기반으로 솔루션을 생각해 냈어. 본질적으로이 문제는 a) navbar가 크기가 조정되고 b) Navbar가 전환으로 크기가 조절되므로 크기가 즉각적인 변경이 아니므로 발생합니다.

내가이 문제를 해결하는 방법은 위치 속성 변경 및 크기 변경. 먼저 "stop_the_jump"div가 표시된 것과 동시에 위치가 고정으로 변경된 다음 페이지에서 "stop_the_jump"(메뉴와 크기가 같은) 높이가 지워지면 "thinner"클래스가 추가되어 메뉴 희석제.

이제 원활하게 작동합니다.

$(window).scroll(function() {  

var Scroll = $(window).scrollTop(); 
var ScrollFXfullHeight = $('.header-wrapper').height(); 

if (Scroll == ScrollFXfullHeight) { 
$("#navigation").addClass("fixed"); 
$(".stop_the_jump").css('display','block'); 

} else if (Scroll > ScrollFXfullHeight) { 
if(!$("#navigation").hasClass('fixed')) { 
    $(".stop_the_jump").css('display','block'); 
    $("#navigation").addClass("fixed"); 
} 
if (Scroll > ScrollFXfullHeight+80) { 
$("#navigation").addClass("thinner"); 
} 
else { 
$("#navigation").removeClass("thinner"); 
} 
} else { 
$("#navigation").removeClass("thinner fixed"); 
$(".stop_the_jump").removeClass("thinner"); 
$(".stop_the_jump").css('display','none'); 
} 

}); 

및 업데이트 된 JSfiddle에 대한 링크 : - 올바른 방향으로 날을 가리키는에 대해 위의 답변 덕분에 여기 내 마지막 코드 당신이 올라올 때 페이지 높이가 변경되기 때문에 http://jsfiddle.net/gnac14qa/6/

Answer 2

탐색 표시 줄의 높이가 고정되어 있고 고정되어 있지 않을 때 (60px 대 80px) 점핑이 작성되었습니다. 이로 인해 탐색 모음의 아래쪽과 정적 내용 맨 사이의 공간이 일치하지 않게됩니다. 다음 코드를 사용하면이 전환을 조금 더 멋지게 만들 수 있습니다 (단, 탐색 막대의 높이를 변경하지 않거나 스크롤 위치에 따라 탐색 막대의 크기를 늘리거나 줄이는 작은 증분을 만드는 경우)) 원활한 고정하지 고정에서 전환을 만들 것 여기 데모 : http://jsfiddle.net/gnac14qa/3/

if (Scroll-18 == ScrollFXfullHeight) { // 18 looks better, the offset is actual 20px but 20 looks choppy 

    $("#navigation").addClass("fixed"); 
    $(".stop_the_jump").css('display','block'); 

} else if (Scroll-22 > ScrollFXfullHeight) { // 22 looks better for the same reason above 
    if(!$("#navigation").hasClass('fixed')) { 
     $(".stop_the_jump").css('display','block'); 
     $("#navigation").addClass("fixed"); 
    } 
    $("#navigation").addClass("thinner"); 
} 

을 또한,이 같은 두 개의 CSS 클래스 참조가 (당신은 그들에게

.stop_the_jump { 
    width:100%; 
    float:none; 
    display:none; 
    background:green; 
} 
.stop_the_jump { 
    height:80px; // can be moved to the class above 
} 

을 결합 할 수 있습니다 Heres는 내가 navbar의 높이를 바꾸지 않음을 의미합니다. http://jsfiddle.net/gnac14qa/4/

#navigation.thinner { 
    width:100%; 
    height:80px !important; //kept at 80px instead of changing to 60px 
}