在页脚滚动上保持固定

Question

I have an issue i've been working on for a day or so, i'm making an online shop, where when you visit a specific item's page, you have a fixed [add to cart] button as a footer, and when i scroll to a specific point, it should become static, check this example here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sticky_header

the only difference is that i need it to be a header, not a footer.

here's my jquery code:

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

}

please help if you have any solutions, thanks!

Answer 1

Have you tried using CSS sticky positioning? You can see an example here

You should specify in which position an element should be fixed. When an element reaches that position it becomes fixed.

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