問題當固定元素頂部

我正在添加一些新的功能到已建成的礦山網站的朋友。他想要一個div，這個標題有點低，只要用戶滾動到頂部就會被鎖定在屏幕上。我創建了可以正常工作的函數波紋管，但只要jquery將元素放置在一個固定位置，所有元素都會向下滑動，導致整個站點「跳躍」。如果不將所有這些元素置於絕對位置，是否有辦法防止這種情況發生？這個網站是相當的參與，並會花費很多重做所有這些元素。問題當固定元素頂部

jQuery(function($) { 
    function lockelem() { 

     if ($(window).scrollTop() > 786) 
      $('.tabs').css({'z-index': '10000', 'position': 'fixed', 'top': '-200px', 'width': '100%'}); 
     else 
      $('.tabs').css({'position': 'relative', 'top': 'auto'}); 
     } 

    $(window).scroll(lockelem); 
    lockelem(); 
});

任何建議將不勝感激！

來源

2013-12-19 Jack Sniper

以前的答案几乎是正確的。它不會工作，因爲else語句不會及時隱藏佔位符div。你需要這個：

function lockelem() { 
    if ($(window).scrollTop() > $('#tabs').position().top) { 
      $('#tabs').css({'z-index': '10000', 'position': 'fixed', 'top': '0', 'width': '100%'}); 
     $("#tabPlaceholder").show(); 
    } 
    if ($(window).scrollTop() < $('#tabPlaceholder').position().top) { 
      $('#tabs').css({'position': 'relative', 'top': 'auto'}); 
      $('#tabPlaceholder').hide(); 
    } 
} 
lockelem(); 
$(window).scroll(lockelem);

工作小提琴，你可能需要調整窗口的大小，使其足夠小，以顯示它的工作：http://jsfiddle.net/rlouie/j7hsX/

來源

2013-12-19 23:21:28

我和我的網站有同樣的問題。我發現的最簡單的解決方案是直接在它之前創建一個「spacer」div。

當主div處於流動狀態（position：static/relative）時，spacer div被隱藏。一旦主流股流出（固定），我顯示隔離區div。下面是一些代碼：

jQuery(function($) { 
function lockelem() { 

    if ($(window).scrollTop() > 786) 
     $('.tabs').css({'z-index': '10000', 'position': 'fixed', 'top': '-200px', 'width': '100%'}); 
     //Here we show the Spacer and set its height (just in case you don't know the height of the div before runtime 
     $('.tabsSpacer').css({height:$('.tabsSpacer').next().height()+'px'}).show(); 
    else 
     $('.tabs').css({'position': 'relative', 'top': 'auto'}); 
     //hide the spacer 
     $('.tabsSpacer').hide(); 
    } 

    $(window).scroll(lockelem); 
    lockelem(); 
});

如果你不喜歡給它自己的類或者你只是可以直接與.prev()主要DIV之前稱其爲元素。實際的實施取決於你，但這是我找到的一般解決方案。

不知道你的實際的HTML結構是什麼，它可能是這個樣子：

<div class="tabsSpacer" style="display:none;"></div> 
<div class="tabs">...</div>

來源

2013-12-19 22:35:10 isick

元素絕對或固定的位置每次總是從文檔流中除去，這是造成跳躍。我發現解決這個問題的最可靠的方法是複製元素並使用複製作爲您的固定標題。這比使用間隔器或在某處增加額外的填充物或任何有可能關閉的東西更好。這樣，根本就不可能移動原始內容，因爲您從未真正觸及過原始內容。另外，我還發現將樣式保留在CSS中，只是讓JS添加或刪除類是操作事物的更簡潔的方式。它爲我節省了很多頭痛。

你可以看到一個頭粘在這裏的一般示例：http://jsfiddle.net/8SB5Z/

爲您的代碼，我應該這樣做：

jQuery(function($) { 

    // Clone the header 
    $('.tabs').clone().addClass('clone').insertAfter('.tabs'); 

    // Add or remove the 'visible' class on the clone as needed 
    function lockelem() { 
     if ($(window).scrollTop() > 786) { 
      $('.tabs.clone').addClass('visible'); 
     } else { 
      $('.tabs.clone').removeClass('visible'); 
     } 
    } 

    // Check the positioning on scroll 
    $(window).scroll(lockelem); 
    lockelem(); 
});

CSS

.tabs.clone { 
    z-index: 10000; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    display:none; 
} 
.tabs.clone.visible { 
    display:block; 
}

來源

2013-12-19 23:22:34 nwalton

問題當固定元素頂部

回答

相關問題