我将如何为碰到窗口顶部时粘住的元素添加顶部偏移量？答案

【问题标题】：How would I go about adding a top offset for an element that sticks when it hits the top of the window?我将如何为碰到窗口顶部时粘住的元素添加顶部偏移量？
【发布时间】：2015-06-30 17:02:04
【问题描述】：

我希望共享包装器在滚动到顶部时粘在窗口顶部。它只是将一个粘性类附加到具有固定位置的元素。但是，我将如何在顶部添加偏移量？我有一个高度为 60px 的固定标题，目前 div 粘在窗口的最顶部，隐藏了它的顶部 60px。相反，我希望它距离窗口顶部 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/

【问题讨论】：

标签： javascript jquery sticky

【解决方案1】：

您可以更新您的 .sticky-fixed 类以将顶部设置为 60 像素而不是 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

【讨论】：