s.vlassis s.vlassis - 4 months ago 23
CSS Question

Create nav bar that appears after scrolling to second section

I need to create something like that

What I understand is that no matter the window size, the background is resized to fit perfectly and once I scroll down the nav bar becomes visible and sticks to the top.

I believe I am going to need javascript (?) and obviously HTML and CSS.

Any tips, even to what to search will be greately appreciated.

Answer

Just google something like 'sticky navigation'. Here's the codepen I found (using jquery) and edited: https://codepen.io/anon/pen/NABAxd.

The idea is very simple: you attach a handler to scroll event to check if user has scrolled down a certain amount. Based on that you apply or remove position:fixed to element. And you can find the amount of pixels scrolled from top via window.pageYOffset.

EDIT: You can set height: 100vh to first section to cover whole browser window. I have edited the codepen.