我将如何为到达 window 顶部时粘住的元素添加顶部偏移量？

Question

我希望共享包装器在 window 滚动到顶部时粘在顶部。它只是将一个粘性 class 附加到具有固定位置的元素。但是，我将如何在顶部添加偏移量？我有一个固定的 header，高度为 60px，目前 div 粘在 window 的最顶部，隐藏了它的顶部 60px。相反，我希望它距离 window.

顶部 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-fixed class 以将顶部设置为 60px 而不是 0。

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

并更新函数以检查 top - 60。

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

A Fiddle

我将如何为到达 window 顶部时粘住的元素添加顶部偏移量？

How would I go about adding a top offset for an element that sticks when it hits the top of the window?

javascript

jquery

sticky