滾動頁面時如何移動 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/