Landing page: Make contents hide behind the header while scrolling

Code Feedback
1

https://codepen.io/architadh/full/Vwvjdpb
I want the rest of the contents to be hidden behind the header portion while I scroll the page. How do I make the main body contents to hide once it reach the header section while scrolling? The way I figured out to do so was by giving the header a background color; but I want the background image to be visible .
Also any suggestions or review of the site is very appreciated. :slight_smile:

2

This can be achived by fixind background in place:

body {
  /* ... */
  background-attachment: fixed;
}
3

not exactly what I meant. The rest contents of the page is visible behind the navbar section when I scroll the page. above code just makes the background fixed. open the link and try scrolling, you will understand what the problem is.

4

I believe what you’re looking for is a “change opacity on scroll” feature. The only way you’ll be able to accomplish something like this would be with JavaScript.

Unfortunately I’m on my phone and typing up code would be a b-

Doing a google search should bring up some tutorials.

Good luck.

5

I understood that. In order for content to hide behind the header, header has to have exact same background fixed in exact same position, right?
screen

1 Like
6

Got it. Thanks a ton :)))

7

Making background attachment fixed in both body and header fixed it. Thanks though :slight_smile: