滾動上的固定頂級菜單不允許觸及屏幕底部

我的固定頂級菜單有一個奇怪的行爲。屏幕高度是動態的（取決於數據庫檢索的註冊表數量）。當註冊管理機構的數量創建一個滾動條，但不足以覆蓋所有菜單時，屏幕會彈跳，並且不允許我觸及底部（無論如何，滾動條會再次跳轉）。滾動上的固定頂級菜單不允許觸及屏幕底部

我能夠模擬此行爲：http://jsfiddle.net/thiagoprzy/0kkx9tsb/

我相信這個問題依賴於我創建的JS部分的方式，但是當我搜索有關的替代解決方案，幾乎所有的人都非常非常相似，這一。

P.S：我的屏幕分辨率是1650x1050，所以如果您的分辨率較低，也許您需要更改高度值以重現問題。

來源

2015-11-18 thiagoprzy

所以，這是我的解決方案：http://jsfiddle.net/thiagoprzy/0kkx9tsb/15/

Basical我放棄了position: fixed和使用position: absolute。然後，我把菜單放在position: relative的包裝中，在$(document).ready()中，我將包裝的高度設置爲與菜單相同。最後，我根據$(window).scroll()事件中的$(window).scrollTop()位置更新菜單的top值。也許這不是最乾淨的解決方案，但它解決了我的問題，現在我很高興。 =）

來源

2015-11-21 01:03:41 thiagoprzy

你需要使用$('.content').offset().top，而不是$('.floating-filter').offset().top或者您可以使用

if ($(window).scrollTop() > $('.floating-filter').outerHeight(true)) {

所以，你可以使用

$(window).scroll(function() { 
    if ($(window).scrollTop() > $('.content').offset().top) { 
     $('.floating-filter').addClass('fixed'); 
    } else { 
     $('.floating-filter').removeClass('fixed'); 
    } 
});

Working Demo

來源

2015-11-18 14:45:59

感謝您的回答。不幸的是，這並不能解決問題，因爲只有在滾動到達'div.content'頂部後，菜單纔會固定在頂部。即使菜單底部仍在屏幕上顯示，我仍然需要始終可見的菜單頂部。 – thiagoprzy

'if（$（window）.scrollTop（）> $（'。floating-filter'）。outerHeight（true））{'做了詭計！謝謝！ – thiagoprzy

@thiagoprzy很高興幫助..祝你好運:) –

滾動上的固定頂級菜單不允許觸及屏幕底部

回答

相關問題