当position:sticky被触发时检测事件

Question

当position:sticky被触发时检测事件

javascriptjqueryhtmlcssposition

112

我正在使用新的 position: sticky (信息) 来创建一个类似于 iOS 的内容列表。

它运行良好，并且比以前的 JavaScript 解决方案 (示例) 要好得多，但据我所知，当触发时没有事件被触发，这意味着我不能在栏目到达页面顶部时进行任何操作，这与先前的解决方案不同。

我想在具有 position: sticky 属性的元素到达页面顶部时添加一个类 (例如 stuck)。是否有一种方式可以使用 JavaScript 监听此事件？使用 jQuery 也可以。

- AlecRust

2

很有趣，因为那篇文章的最受欢迎评论恰好解决了你的问题。那个人说得非常准确，应该使用媒体查询而不是属性。这样，当元素被卡住时（我们经常这样做），就可以更改样式。哦，好吧，一个人可以做梦。 - Christian

1

是的，我注意到了那个评论，他的建议似乎更好。不过，position: sticky 是Chrome实现的，所以我正在寻找一种可用的方法！ - AlecRust

2

你找到解决方案了吗？ - Ric

如果有人通过谷歌搜索到这里，其中一位谷歌工程师提供了一种使用IntersectionObserver、自定义事件和哨兵的解决方案：https://developers.google.com/web/updates/2017/09/sticky-headers - Scott L

5

我是傻瓜吗？！第一位评论者在谈论哪篇文章？！ - katerlouis

2

@katerlouis 不是！我认为这是链接失效或评论被删除的情况。 - Brian Zelip

12个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stephen R · Answer 1

@vsync的优秀答案几乎满足了我的需求，但是我通过Grunt“uglify”我的代码，而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没有改变

- axieax · Answer 2

对于固定的滚动高度，也可以像这样实现：

// 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');
});