检测 position:sticky 何时触发的事件

Question

我正在使用新的position: sticky (info) 创建类似 iOS 的内容列表。

它运行良好，并且比以前的 JavaScript 替代方案 (example) 好得多，但是据我所知，当它被触发时没有触发任何事件，这意味着当栏到达页面顶部时我什么也做不了，与之前的解决方案不同。

当带有position: sticky 的元素到达页面顶部时，我想添加一个类（例如stuck）。有没有办法用 JavaScript 来监听这个？ jQuery的使用很好。

Answer 1

Demo 和 IntersectionObserver（使用技巧）：

// get the sticky element
const stickyElm = document.querySelector('header')

const observer = new IntersectionObserver( 
  ([e]) => e.target.classList.toggle('isSticky', e.intersectionRatio < 1),
  {threshold: [1]}
);

observer.observe(stickyElm)

body{ height: 200vh; font:20px Arial; }

section{
  background: lightblue;
  padding: 2em 1em;
}

header{
  position: sticky;
  top: -1px;                       /* ➜ the trick */

  padding: 1em;
  padding-top: calc(1em + 1px);    /* ➜ compensate for the trick */

  background: salmon;
  transition: .1s;
}

/* styles for when the header is in sticky mode */
header.isSticky{
  font-size: .8em;
  opacity: .5;
}

<section>Space</section>
<header>Sticky Header</header>

top 的值必须是-1px，否则元素将永远不会与浏览器窗口的顶部相交（因此永远不会触发相交观察者）。

为了应对这种1px 的隐藏内容，应在粘性元素的边框或填充中添加额外的1px 空间。

? 或者，如果您希望保持 CSS 原样 (top:0)，那么您可以通过添加设置 rootMargin: '-1px 0px 0px 0px' (正如 @mattrick 在他的回答中显示的那样）

带有老式 scroll 事件监听器的演示：

1. auto-detecting first scrollable parent
2. Throttling the scroll event
3. 关注点分离的功能组合
4. 事件回调缓存：scrollCallback（如果需要可以解绑）

// get the sticky element
const stickyElm = document.querySelector('header');

// get the first parent element which is scrollable
const stickyElmScrollableParent = getScrollParent(stickyElm);

// save the original offsetTop. when this changes, it means stickiness has begun.
stickyElm._originalOffsetTop = stickyElm.offsetTop;


// compare previous scrollTop to current one
const detectStickiness = (elm, cb) => () => cb & cb(elm.offsetTop != elm._originalOffsetTop)

// Act if sticky or not
const onSticky = isSticky => {
   console.clear()
   console.log(isSticky)
   
   stickyElm.classList.toggle('isSticky', isSticky)
}

// bind a scroll event listener on the scrollable parent (whatever it is)
// in this exmaple I am throttling the "scroll" event for performance reasons.
// I also use functional composition to diffrentiate between the detection function and
// the function which acts uppon the detected information (stickiness)

const scrollCallback = throttle(detectStickiness(stickyElm, onSticky), 100)
stickyElmScrollableParent.addEventListener('scroll', scrollCallback)



// OPTIONAL CODE BELOW ///////////////////

// find-first-scrollable-parent
// Credit: https://stackoverflow.com/a/42543908/104380
function getScrollParent(element, includeHidden) {
    var style = getComputedStyle(element),
        excludeStaticParent = style.position === "absolute",
        overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;

    if (style.position !== "fixed") 
      for (var parent = element; (parent = parent.parentElement); ){
          style = getComputedStyle(parent);
          if (excludeStaticParent && style.position === "static") 
              continue;
          if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) 
            return parent;
      }

    return window
}

// Throttle
// Credit: https://jsfiddle.net/jonathansampson/m7G64
function throttle (callback, limit) {
    var wait = false;                  // Initially, we're not waiting
    return function () {               // We return a throttled function
        if (!wait) {                   // If we're not waiting
            callback.call();           // Execute users function
            wait = true;               // Prevent future invocations
            setTimeout(function () {   // After a period of time
                wait = false;          // And allow future invocations
            }, limit);
        }
    }
}

header{
  position: sticky;
  top: 0;

  /* not important styles */
  background: salmon;
  padding: 1em;
  transition: .1s;
}

header.isSticky{
  /* styles for when the header is in sticky mode */
  font-size: .8em;
  opacity: .5;
}

/* not important styles*/

body{ height: 200vh; font:20px Arial; }

section{
  background: lightblue;
  padding: 2em 1em;
}

<section>Space</section>
<header>Sticky Header</header>

---

这是使用第一种技术的React component demo

Answer 2

我找到了一个类似于@vsync 的答案的解决方案，但它不需要您需要添加到样式表中的“hack”。您可以简单地更改 IntersectionObserver 的边界，以避免需要将元素本身移动到视口之外：

const observer = new IntersectionObserver(callback, {
  rootMargin: '-1px 0px 0px 0px',
  threshold: [1],
});

observer.observe(element);

Answer 3

如果有人通过 Google 来到这里，他们自己的工程师有一个使用 IntersectionObserver、自定义事件和哨兵的解决方案：

https://developers.google.com/web/updates/2017/09/sticky-headers

Answer 4

只需使用 vanilla JS 即可。您也可以使用 lodash 的节流功能来防止一些性能问题。

const element = document.getElementById("element-id");

document.addEventListener(
  "scroll",
  _.throttle(e => {
    element.classList.toggle(
      "is-sticky",
      element.offsetTop <= window.scrollY
    );
  }, 500)
);

Answer 5

Chrome添加position: sticky后发现是not ready enough和relegated to to --enable-experimental-webkit-features flag。 Paul Irish said in February“功能处于奇怪的边缘状态 atm”。

我一直在使用the polyfill，直到它变得非常头疼。它运行良好，但存在一些极端情况，例如 CORS 问题，并且通过对所有 CSS 链接执行 XHR 请求并将它们重新解析为浏览器忽略的“位置：粘性”声明，会减慢页面加载速度。

现在我使用ScrollToFixed，我比StickyJS 更喜欢它，因为它不会用包装器弄乱我的布局。

Answer 6

目前没有原生解决方案。见Targeting position:sticky elements that are currently in a 'stuck' state。不过，我有一个 CoffeeScript 解决方案，它既适用于原生 position: sticky，也适用于实现粘性行为的 polyfill。

为您想要粘性的元素添加“粘性”类：

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 0px;
  z-index: 1;
}

CoffeeScript 监控“粘性”元素位置并在它们处于“粘性”状态时添加“卡住”类：

$ -> new StickyMonitor

class StickyMonitor

  SCROLL_ACTION_DELAY: 50

  constructor: ->
    $(window).scroll @scroll_handler if $('.sticky').length > 0

  scroll_handler: =>
    @scroll_timer ||= setTimeout(@scroll_handler_throttled, @SCROLL_ACTION_DELAY)

  scroll_handler_throttled: =>
    @scroll_timer = null
    @toggle_stuck_state_for_sticky_elements()

  toggle_stuck_state_for_sticky_elements: =>
    $('.sticky').each ->
      $(this).toggleClass('stuck', this.getBoundingClientRect().top - parseInt($(this).css('top')) <= 1)

注意：此代码仅适用于垂直粘性位置。

Answer 7

我想出了这个解决方案，它就像一个魅力，而且非常小。 :)

不需要额外的元素。

它确实在窗口滚动事件上运行，但这是一个小缺点。

apply_stickies()

window.addEventListener('scroll', function() {
    apply_stickies()
})

function apply_stickies() {
    var _$stickies = [].slice.call(document.querySelectorAll('.sticky'))
    _$stickies.forEach(function(_$sticky) {
        if (CSS.supports && CSS.supports('position', 'sticky')) {
            apply_sticky_class(_$sticky)
        }
    })
}

function apply_sticky_class(_$sticky) {
    var currentOffset = _$sticky.getBoundingClientRect().top
    var stickyOffset = parseInt(getComputedStyle(_$sticky).top.replace('px', ''))
    var isStuck = currentOffset <= stickyOffset

    _$sticky.classList.toggle('js-is-sticky', isStuck)
}

注意：此解决方案不考虑具有底部粘性的元素。这仅适用于粘性标题之类的东西。不过，它可能可以适应底部粘性。

Answer 8

我知道这个问题已经有一段时间了，但我找到了一个很好的解决方案。插件stickybits 在支持的情况下使用position: sticky，并在元素“卡住”时将类应用于元素。我最近使用它并取得了不错的效果，并且在撰写本文时，它正在积极开发（这对我来说是一个加分）:)

Answer 9

我在我的主题中使用这个 sn-p 将 .is-stuck 类添加到 .site-header 当它处于卡住位置时：

// noinspection JSUnusedLocalSymbols
(function (document, window, undefined) {

    let windowScroll;

    /**
     *
     * @param element {HTMLElement|Window|Document}
     * @param event {string}
     * @param listener {function}
     * @returns {HTMLElement|Window|Document}
     */
    function addListener(element, event, listener) {
        if (element.addEventListener) {
            element.addEventListener(event, listener);
        } else {
            // noinspection JSUnresolvedVariable
            if (element.attachEvent) {
                element.attachEvent('on' + event, listener);
            } else {
                console.log('Failed to attach event.');
            }
        }
        return element;
    }

    /**
     * Checks if the element is in a sticky position.
     *
     * @param element {HTMLElement}
     * @returns {boolean}
     */
    function isSticky(element) {
        if ('sticky' !== getComputedStyle(element).position) {
            return false;
        }
        return (1 >= (element.getBoundingClientRect().top - parseInt(getComputedStyle(element).top)));
    }

    /**
     * Toggles is-stuck class if the element is in sticky position.
     *
     * @param element {HTMLElement}
     * @returns {HTMLElement}
     */
    function toggleSticky(element) {
        if (isSticky(element)) {
            element.classList.add('is-stuck');
        } else {
            element.classList.remove('is-stuck');
        }
        return element;
    }

    /**
     * Toggles stuck state for sticky header.
     */
    function toggleStickyHeader() {
        toggleSticky(document.querySelector('.site-header'));
    }

    /**
     * Listen to window scroll.
     */
    addListener(window, 'scroll', function () {
        clearTimeout(windowScroll);
        windowScroll = setTimeout(toggleStickyHeader, 50);
    });

    /**
     * Check if the header is not stuck already.
     */
    toggleStickyHeader();


})(document, window);

Answer 10

@vsync 的出色答案几乎是我所需要的，只是我通过 Grunt “丑化”了我的代码，而 Grunt 需要一些较旧的 JavaScript 代码样式。这是我改用的调整后的脚本：

var stickyElm = document.getElementById('header');
var observer = new IntersectionObserver(function (_ref) {
    var e = _ref[0];
    return e.target.classList.toggle('isSticky', e.intersectionRatio < 1);
}, {
    threshold: [1]
});
observer.observe( stickyElm );

那个答案的 CSS 没有改变

Answer 11

这样的东西也适用于固定的滚动高度：

// select the header
const header = document.querySelector('header');
// add an event listener for scrolling
window.addEventListener('scroll', () => {
  // add the 'stuck' class
  if (window.scrollY >= 80) navbar.classList.add('stuck');
  // remove the 'stuck' class
  else navbar.classList.remove('stuck');
});