粘滯的導航欄使內容跳回備份

我有一個簡單的網站設置了標題，導航欄和內容。當頁面到達導航欄時，位置變得固定，所以導航欄位於頁面的頂部 - 此時，導航欄的高度也會變小一些（因爲我喜歡這種效果） - 我通過添加單獨的類來完成此操作，固定和更薄的導航欄。粘滯的導航欄使內容跳回備份

大多數人都知道當你向內聯元素添加「position：fixed」時會發生的問題，因爲它會使內容突然「向上跳躍」。爲了抵消這一點，我添加了一個名爲「stop_the_jump」的div，它隱藏起來，直到導航欄變得固定，然後顯示在它的位置上。所有這些都在順利運行的過程中順利進行，但當您向後滾動時，由於導航欄現在變得更薄，您可以跳轉。

我拉着我的頭髮在這一個，我怎麼能消除這種跳躍發生在備份的方式。

這裏是一個的jsfiddle清楚地表明我的問題： http://jsfiddle.net/gnac14qa/

我的jQuery代碼如下：

$(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'); 
} 
});

任何幫助將非常感激。

來源

2015-01-15 Sam Skirrow

這happend因爲當你告訴你的頁面高度的變化/隱藏元素，而不是像，*滾動<50時顯示div，滾動時隱藏> = 50 *它變得像*顯示div在滾動<45，隱藏在滾動> = 50 *（如果你知道我的意思）。 –

嗨@AndrewDunai恐怕我沒有真正遵循 - 你能編輯我的JSFiddle並告訴我你的意思嗎？ –

好吧，我想出了一個基於上述答案的解決方案。基本上這個問題是由以下事實引起的：a）導航欄調整大小並且變得固定並且b）導航欄大小調整爲轉換 - 所以它不是立即改變的大小

我這樣做的方式是階段更改位置屬性和尺寸更改。首先，在顯示「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/

來源

2015-01-15 14:37:25

創建跳轉是因爲您在更改導航欄的高度時會修改導航欄的高度，並且導航欄的高度不固定（60px vs 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 
}

繼承人什麼我意思是不切換導航欄的高度：http://jsfiddle.net/gnac14qa/4/

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

來源

2015-01-15 14:08:12 indubitablee

粘滯的導航欄使內容跳回備份

回答

相關問題