I was able to make the navbar stick to the top of the screen when the user scrolls past it, but it causes a bump, breaking the flow. How does one fix this?
Hello there! first of all I have notice that you need to close the ul tag properly.
Second, tried to check the code you provide us but seems like something might be missing because when I tried to check it out the nav wouldn’t stick to the top. So I don’t know if I fully get what you need. But have you tried adding a z-index and giving it a high value? With that it should work smoothly because the nav will always be on top of any other element without breaking the flow I hope that helps!
I’m confused about your use of that JS. What exactly is it you want to have happen?
As it is now you allow for some scrolling before adding the class. Is that the intention and if so how should the nav behave when it receives the class. How should it change its position without jumping down the page. The only thing I can think of would be to transition or animate it, so the “jump” is smooth.
Sure you still need to use the offset. I was fishing for your usecase for position sticky and why it was needed.
Also, I somehow missed the fact that you are using position fixed and not position sticky, I guess I just read the title and assumed something incorrect sorry for the confusion.