当position：sticky被触发时的事件

I'm using the new position: sticky (info) to create an iOS-like list of content.

我正在使用新职位：sticky（info）来创建类似iOS的内容列表。

It's working well and far superior than the previous JavaScript alternative (example) however as far as I know no event is fired when it's triggered, which means I can't do anything when the bar hits the top of the page, unlike with the previous solution.

它运行良好，远远优于以前的JavaScript替代品（例子），但据我所知，触发事件时不会触发任何事件，这意味着当条形图到达页面顶部时我无法执行任何操作，与之前的操作不同解。

I'd like to add a class (e.g. stuck) when an element with position: sticky hits the top of the page. Is there a way to listen for this with JavaScript? Usage of jQuery is fine.

当有位置：粘贴的元素点击页面顶部时，我想添加一个类（例如卡住）。有没有办法用JavaScript来听？使用jQuery很好。

A demo of the new position: sticky in use can be found here.

可以在此处找到新位置的演示：粘性使用。

4 个解决方案

#1

There is currently no native solution. See Targeting position:sticky elements that are currently in a 'stuck' state. However I have a CoffeeScript solution that works with both native position: sticky and with polyfills that implement the sticky behavior.

目前没有原生解决方案。请参阅定位位置：当前处于“卡住”状态的粘性元素。但是我有一个CoffeeScript解决方案，它既适用于原生位置：粘性，也适用于实现粘性行为的polyfill。

Add 'sticky' class to elements you want to be sticky:

将“粘性”类添加到要粘贴的元素：

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

CoffeeScript to monitor 'sticky' element positions and add the 'stuck' class when they are in the 'sticky' state:

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)

NOTE: This code only works for vertical sticky position.

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

#2

If anyone gets here via Google one of their own engineers has a solution using IntersectionObserver, custom events, and sentinels:

如果有人通过Google来到这里，他们自己的工程师之一就可以使用IntersectionObserver，自定义事件和标记来解决问题：

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

#3

After Chrome added position: sticky, it was found to be not ready enough and relegated to to --enable-experimental-webkit-features flag. Paul Irish said in February "feature is in a weird limbo state atm".

在Chrome添加位置：粘性后，发现它已经不够准备并且降级为--enable-experimental-webkit-features标志。保罗爱尔兰人在二月份表示“特征处于一种奇怪的状态”。

I was using the polyfill until it become too much of a headache. It works nicely when it does, but there are corner cases, like CORS problems, and it slows page loads by doing XHR requests for all your CSS links and reparsing them for the "position: sticky" declaration that the browser ignored.

我正在使用填充剂，直到它变得太头疼。它可以很好地工作，但是有一些极端情况，比如CORS问题，它通过对所有CSS链接执行XHR请求并为浏览器忽略的“position：sticky”声明重新分析它来减慢页面加载速度。

Now I'm using ScrollToFixed, which I like better than StickyJS because it doesn't mess up my layout with a wrapper.

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

#4

I know it has been some time since the question was asked, but I found a good solution to this. The plugin stickybits uses position: sticky where supported, and applies a class to the element when it is 'stuck'. I've used it recently with good results, and, at time of writing, it is active development (which is a plus for me) :)

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

#1