For the past day, I've been tackling a challenge with my online shop project. On the specific item's page, I want to include a fixed [add to cart] button as a footer initially, which then becomes sticky when scrolling to a certain point. You can see an example of this functionality here.
The only difference is that instead of a footer, I need it to be a header.
Below is the jQuery code I've implemented:
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
})
}If you have any solutions or suggestions, please help me out. Thank you!