Javascript 柔性容器罐'；t检测窗口滚动顶部偏移

我需要获取

window.pageYOffset | | document.documentElement.scrollTop值。
确定

1） 如果用户已在标题上滚动

2） 方向
st

$（窗口）。on（'scroll'，fn）
不起作用，所以我使用了
$（'main'）。on（'scroll'，fn）
。这是因为我正在使用

body {
  display: flex;
  flex-direction: column;
}

但现在我无法将滚动的距离调整。有什么想法吗？吼叫

我正在使用此解决方案-
您正在使用dispay:flex-on-body元素。这不是个好主意，用div代替。只要在身体上保留弹性（其他元素都很好），你就可以让它工作了

显示器：flex；
弯曲方向：立柱
 我个人认为更改
主体
元素的显示类型是一个糟糕的选择。它是根容器，谁知道每个浏览器如何指定它的显示。我认为最好创建自己的根元素并从那里开始



var$main=$（'main'）；
$main.on（'scroll'，（）=>{
var pos=$main.scrollTop（）；
var isTop=pos==0；
$main.toggleClass（'top'，isTop）；
var isBottom=pos+$main.innerHeight（）>=$main.prop（'scrollHeight'）；
$main.toggleClass（'bottom'，isBottom）；
console.log（'正在触发'，位置）；
});
html，正文{
高度：100vh；
保证金：0；
填充：0；
}
#根{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
}
.sticky页眉、.sticky页脚{
flex:0自动；
背景：紫色；
}
.粘性内容{
flex:1自动；
溢出y：滚动；
背景颜色：绿色；
}
.顶{
背景颜色：黄色；
}
.底部{
背景颜色：橙色；
}

我黏糊糊的
这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

这是大量可滚动的内容

我黏糊糊的
$（窗口）
不是
$（“窗口”）
只需使用
显示：block
创建另一个容器，然后将flex容器放在该容器内。然后获取您的
s
var lastScrollTop = 0;
var delta = 5;


$(window).on('scroll', () => {
     var st = window.pageYOffset || document.documentElement.scrollTop;
     console.log('not triggering', st);
});

$('main').on('scroll', () => {
    var st = window.pageYOffset || document.documentElement.scrollTop;
    console.log('is triggering', st);
});