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

【问题标题】：How to move HTML elements when a page is scrolled?滚动页面时如何移动 HTML 元素？
【发布时间】：2021-04-07 21:01:15
【问题描述】：

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

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

【问题讨论】：

请参阅stackoverflow.com/help/how-to-ask。您的问题不符合在 SO 上发布的要求。
另外，元素在页面中。标签是 HTML 文件中的文本。

标签： javascript html jquery web blogger

【解决方案1】：

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

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

【讨论】：

没有那样的。如果我使用粘性，
标签不会改变位置。当网页滚动时，我想要的
标签会移动。例如，最初标题位于顶部，当我滚动时，位置将移动到右侧或左侧。不过谢谢你的回答。

【解决方案2】：

我在我的应用程序中使用 jQuery 来处理类似的事情。以下代码会在滚动 10px 时将 'scroll-active' 类添加到 'nav' 中，并在没有滚动时将其移除。

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

我认为您可以使用它并在您添加的类中添加必要的 css 以将其放在右侧。

【讨论】：

【解决方案3】：

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

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

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

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/

【讨论】：