如何爲一個元素添加一個頂部偏移量，當它碰到窗口頂部時粘住它？

Question

我想要一個共享包裝器在滾動到達頂部時粘到窗口頂部。它只是將一個粘性類添加到具有固定位置的元素。但是，我會如何去頂部添加一個偏移量？我有一個固定的頭部，高度爲60px，目前div粘貼到窗口的頂部，隱藏頂部60px。相反，我希望它從窗口頂部保持60px。

我的JS：

(function() { 
    var $stickyShare, $window, top; 
    $window = $(window); 
    $stickyShare = $('.share-container'); 
    top = $stickyShare.offset().top; 
    $window.scroll(function() { 
     return $stickyShare.toggleClass('sticky-fixed', $window.scrollTop() > top); 
    }); 
}.call(this)); 

一個的jsfiddle：http://jsfiddle.net/h6afrtpk/1/

Answer 1

您可以更新.sticky固定類設置頂部60PX而不是0

.share-container.sticky-fixed { 
    position: fixed; 
    top: 60px; 
    left: auto; 
    right: auto; 
    background-color: #fff; 
    border-bottom: 1px solid #ccc; 
} 

而且更新功能檢查頂部 - 60.

return $stickyShare.toggleClass('sticky-fixed', $window.scrollTop() > top - 60); 

A Fiddle