滚动页面时如何移动 HTML 元素？

Question

如何制作最初“固定”的 HTML 元素，然后当我们向下滚动 web 页面或更具体地通过元素时，该元素将移动到侧面或我们指定的任何位置。 当然，当我们向后滚动 web 页面并传递元素时，它会恢复正常。

如果有请帮忙，我要求一篇文章或解释使用什么以及源代码的例子。

Answer 1

您可以为此使用粘性： https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sticky_element

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Answer 2

我在我的应用程序上使用 jQuery 进行类似的操作。 以下代码将在滚动 10px 时将 'scroll-active' 的 class 添加到 'nav' 中，并在没有滚动时将其删除。

$(function () {
    $(window).on('scroll', function () {
        if ( $(window).scrollTop() > 10 ) {
            $('nav').addClass('scroll-active');
        } else {
            $('nav').removeClass('scroll-active',);
        }
    });
});

我认为您可以使用它并在添加的 class 上添加必要的 css 以使其位于右侧。

Answer 3

为此，您可能需要 javascript，如果您不想使用 jQuery，这可能对您有用。

<div id="container">
  some content
</div>

和一些 javascript 来定义添加一个 class：

window.addEventListener('scroll', function(e) {
  container = document.getElementById('container');
  // The 0 could be a larger threshold if you want to move it after scrolling a bit
  container.classList.toggle('scrolling', window.scrollY > 0); 
});

然后定义你的 CSS：

#container {
  /* style when not scrolling */
}

#container.scrolling {
  /* style when scrolling */
  position: fixed;
}

这是一个有效的jsfiddle： https://jsfiddle.net/96xvotpc/2/