我正在使用新的位置：sticky(
info)来创建类似iOS的内容列表.
它的工作性能比以前的JavaScript替代方案(example)要好得多,但据我所知,触发时没有触发任何事件,这意味着我们不能在页面顶部进行任何操作,与之前的解.
当有位置：sticky的元素点击页面顶部时,我想添加一个类(例如卡住).有没有办法用JavaScript来听这个？ jQuery的用法很好.
新职位的演示：粘贴在使用中可以找到here.
解决方法
目前没有本地解决方案.请参阅
Targeting position:sticky elements that are currently in a ‘stuck’ state.但是,我有一个CoffeeScript解决方案,与原始位置：粘性和使用实现粘性行为的聚合物.
将“粘性”类添加到要粘贴的元素中：
- .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)
注意：此代码仅适用于垂直粘性位置.
