滚动元素以锚定屏幕高度的 75%答案

【问题标题】：Scroll element to anchor 75% of the screen height滚动元素以锚定屏幕高度的 75%
【发布时间】：2018-08-16 10:12:24
【问题描述】：

这可能看起来有点复杂 - 我正在尝试构建一个函数

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

以下是我尝试创建函数的 sn-p

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

});

【问题讨论】：

您的 sn-p 丢失。

标签： javascript jquery html sticky

【解决方案1】：

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

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

这实际上颠倒了侧边栏的定义。主文章变成了在实际侧边栏旁边滚动的侧边栏，它定义了整个页面的高度。这个插件最大的好处就是可以给站点添加页眉和页脚，固定内容不会重叠，而是停在页脚处。

【讨论】：

【解决方案2】：

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

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

【讨论】：