s.vlassis s.vlassis - 2 months ago 6x
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.


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.