在页脚滚动上保持固定

Question

我有一个问题已经解决了一天左右，我正在创建一个在线商店，当您访问特定商品的页面时，您有一个固定的[添加到购物车]按钮作为页脚，当我滚动到特定点，它应该变为静态，唯一的区别是我需要它作为页眉，而不是页脚。这是我的 jquery 代码：const myFunction = () => {let lastScrollTop = 0$(window).scroll(() => {  const footerTop = $('.wrapper-footer')?.offset()?.top || null  const container = $('.wrapper-mobile-price')  const containerHeight = wrapperMobilePrice.height()  const bottomOfScreen = $(window).scrollTop() + $(window).innerHeight()  const st = $(window).scrollTop()  if (st > lastScrollTop) {    if (bottomOfScreen > footerTop + (containerHeight / 2)) {      container.css({position: 'static'})    }  } else {    if (bottomOfScreen + containerHeight < footerTop) {      container.css({position: 'fixed'})    }  }  lastScrollTop = st})}如果有解决办法请帮忙，谢谢！

Answer 1

你尝试过使用 CSS 粘性定位吗？

您应该指定元素应固定在哪个位置。当一个元素到达该位置时，它就会被固定。

div.sticky {

  position: -webkit-sticky; /* Safari */

  position: sticky;

  top: 500px;

}