Question

这似乎有些令人费解-我正在尝试构建一个函数

当Y轴达到单个后置容器的特定高度百分比时，我正在尝试创建粘性滚动功能。侧边栏本身很长，基本上是当您到达文章的底部-注释部分时。单个后置容器贴在顶部，并且侧边栏具有固定的滚动

下面是我尝试创建功能的片段

$(window).scroll(function () {
if ($(window).scrollTop() >= 800) {
    $('.sidebar-fixed').addClass('test');
    $('.single-post-container').addClass('single-post-fixed');
} else {
    $('.sidebar-fixed').removeClass('test');
    $('.single-post-container').removeClass('single-post-fixed');
}

});

Answer 1

有一个非常老的jQuery插件可以满足您的需求，我一直都在使用它。它称为stickyfloat。

Here's演示以查看其功能。我认为$('.single-post-container').stickyfloat({duration: 0});应该可以解决您的问题。您甚至可以为所需的起始偏移量添加一个选项。此偏移量应为.single-post-container的高度减去窗口的高度。这样，当文章底部出现在屏幕上时，滚动开始。

这实际上颠倒了侧边栏的定义。主要文章变为侧边栏，该侧边栏在实际侧边栏旁边滚动，该边栏定义了整个页面的高度。关于此插件的最好的事情是，您可以在网站上添加页眉和页脚，固定内容不会重叠，而是在页脚处停止。

Answer 2

有一个相对较新的CSS属性position: sticky;可以满足您的需要，但浏览器支持却有些不足：https://caniuse.com/#feat=css-sticky

只需提供您的.single-post或内容position: sticky;中的任何元素，当它到达视口顶部时，它将保持其位置，就好像是固定的，不需要使用javascript。

滚动元素以固定屏幕高度的75％

2 个答案: