1

I'm trying to understand how this website is done by looking at it's css: http://www.genymobile.com/

What I'm trying to figure out is how the top menu element could have the background image from the fullscreen elements background image and then be sticky when user scroll!?

Could someone tell me how they have done this?

3D-kreativ
  • 9,053
  • 37
  • 102
  • 159
  • 1
    http://stackoverflow.com/questions/23614544/menu-background-change-color-on-scroll this should answer your question. :) – Kyrbi Aug 10 '15 at 07:33
  • I'm not looking for info about how to change color of the menu background. – 3D-kreativ Aug 10 '15 at 07:36
  • So just update CSS of that answer like this http://jsfiddle.net/4xSe4/380/ – Kyrbi Aug 10 '15 at 07:43
  • @Kyrbi I'm looking for a solution to have the menu element above the fullscreen element, but it's seem that I missed to set the position to fixed for the menu element. – 3D-kreativ Aug 10 '15 at 07:48

2 Answers2

1

The navbar div has position:fixed set, hence it 'sticks' to the top even when the user scrolls.

Regarding the change in the background color of the navigation bar:

Initially it has background-color: rgba(106, 106, 106, 0.3); - so because of the alpha value of 0.3 - it looks transparent so that it merges with the background image.

Once the user scrolls - you can see in the developer tools that a new class 'shrink' is added via javascript which changes some of the properties of the navbar - including the background color.

Danield
  • 121,619
  • 37
  • 226
  • 255
1

The navbar has its position set as fixed. This allows the Navbar to remain at the top of the webpage all the time. The navbar also contains some Javascript animation to change its background colour from gray to white

The rest of the page are divs with a width of 100%. Each of these div's contain a background-image.

Sachin
  • 737
  • 1
  • 9
  • 23