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-fixed类，将顶部设置为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

如何在元素到达窗口顶部时添加顶部偏移量？

1 个答案: