在页脚滚动上保持固定

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;}