位置事件：粘性触发

我正在使用新的position: sticky（info）创建类似iOS的内容列表。位置事件：粘性触发

它运行良好，远远优于以前的JavaScript替代方案（example），但据我所知，当触发事件时不会触发事件，这意味着当条打到页面顶部时我无法做任何事情，不像以前的解决方案。

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

使用中的新position: sticky的演示可以在here找到。

来源

2013-04-30 AlecRust

这很有趣，因为那篇文章最精彩的评论正好解决您的问题。这家伙得到了发现，这应该是一个媒体查询，而不是一个财产。这样，当元素卡住时（我们经常这样做），您可以改变样式。哦，一个人可以做梦。 – 2013-04-30 16:44:11

是的，我注意到这个评论，他的提议似乎好得多。不过，“位置：粘性”是Chrome实施的，所以我正在寻找一种可用的方式！ – AlecRust 2013-04-30 16:46:25

您是否找到解决方案？ – 2014-04-16 15:29:32

在Chrome添加position: sticky之后，发现它是not ready enough和relegated to to --enable-experimental-webkit-features flag。保罗爱尔兰said in February“功能是在一个怪异的状态atm”。

我正在使用the polyfill，直到它变得非常头痛。它可以很好地工作，但有一些角落案例，比如CORS问题，并且通过为所有CSS链接执行XHR请求并重新解析浏览器忽略的“position：sticky”声明，从而减缓页面加载速度。

现在我正在使用ScrollToFixed，我比StickyJS更好，因为它不会使用包装搞乱我的布局。

来源

2013-05-01 14:59:22 Turadg

目前没有本地解决方案。见Targeting position:sticky elements that are currently in a 'stuck' state。不过，我有一个CoffeeScript解决方案，可以与本地position: sticky以及实现粘性行为的polyfills一起使用。

添加“粘性”类元素，你想成为粘性：

.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)

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

来源

2014-10-03 19:22:01

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

来源

2017-07-27 09:14:30 Davey

Stickybits的一个疑难问题是，我发现当其他js正在监听滚动事件时，它不会很出色。这些问题只有在我不支持'position：sticky'（ie11，edge）的浏览器中测试时才会显现出来。 – Davey 2017-08-31 08:04:31

这个lib是bug ********* – VSG24 2017-09-02 22:07:12

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

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

来源

2017-10-02 18:00:10

这是一个解释不好的答案，但是，如果用户可以使用仅限Chrome的解决方案，该链接将显示对此问题的非常好的答案。 – wdanda 2017-10-31 17:54:00

使用JavaScript。我们需要纯粹的CSS方法。 – Green 2018-02-01 07:26:13

位置事件：粘性触发

回答

相关问题