出問題JavaScript的永久報頭實現

我有這樣的代碼：http://jsfiddle.net/KCb5z/7/出問題JavaScript的永久報頭實現

它的目的是讓我點擊黃色欄上的鏈接，也有它被pesistent。它似乎大部分工作，但在轉換向下滾動時，黃色條在頁面頂部持久存在的部分發生故障。

我相信這是這段代碼，這是造成它：

var $select = $('#select'); 
var $window = $(window); 
var isFixed = false; 
var init = $select.length ? $select.offset().top : 0; 

$window.scroll(function() { 
    var currentScrollTop = $window.scrollTop(); 
    if (currentScrollTop > init && isFixed === false) { 
     isFixed = true; 
     $select.css({ 
      top: 0, 
      position: 'fixed' 
     }); 
    } else if (currentScrollTop <= init && isFixed === true) { 
     isFixed = false; 
     $select.css('position', 'relative'); 
    } 
});

是它明顯是什麼原因造成的問題，因爲如果您滾動一路下跌至底部，它工作正常。

來源

2014-05-12 Jimmy

什麼瀏覽器？在Chrome 34上看起來很好。另外，你可能想在nav上更新'scrollTop'點擊scrollTop：$（divId）.offset（）。top - $ select.height（）'確保你抵消了高度的導航欄和用戶可以看到部分 – CodingIntrigue

的*頂部*我也使用Chrome。它通過向上或向下拖動右側滑塊來顯示，或者如果在黃色欄上的「發佈」中單擊幾次，它會顯得有些雜亂。使用鼠標滾輪似乎隱藏了毛病 – Jimmy

@RGraham如果我按照你的建議去做，當我點擊「張貼」時，我會在黃色欄的頂部看到一個棕色的間隙：http://jsfiddle.net/2vY6G/你是否知道如何解決這個問題？ – Jimmy

當選擇元素的狀態從relative更改爲static時，文檔重新流動可能導致毛刺，反之亦然。您需要找到一種方法來停止重新流動，或者通過使佔位符元素佔據元素從流中移除時留下的空間（可能是帶有visibility:hidden的重複元素），或者確保它不影響文檔流在第一位。

來源

2014-05-12 11:47:43 graphicdivine

出問題JavaScript的永久報頭實現

回答

相關問題