Как я могу добавить верхнее смещение для элемента, который торчит, когда он попадает в верхнюю часть окна?

Question

Я хочу, чтобы обертка для совместного доступа придерживалась верхней части окна, когда она достигла вершины на прокрутке. Он просто добавляет липкий класс к элементу с фиксированной позицией. Однако, как я могу добавить смещение к вершине? У меня есть фиксированный заголовок размером 60 пикселей в высоту, и в настоящее время div прилипает к самой верхней части окна, скрывая верхние 60 пикселей. Вместо этого я хочу, чтобы он вставлял 60 пикселей в верхнюю часть окна.

Мои 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