Parallax 1st attempt, fixed scrolling nav not showing up!

[supertotem]

Hello everyone, this is my first post ever

I’m a beginner in the business and I just got hired to design a simple website. I decided it was a good time to experiment and to apply (or attempt to apply since it’s not necessary) the parallax effect. My nav is supposed to appear after the first section when you scroll down, and to stay fixed while you scroll. But I can’t seem to make it appear, I used z-index for the nav and it still won’t show up…. Is it something about the positioning?

Please help I’ve been browsing for days and time is almost up!

here’s my webpage: Via Express

[Atelierbram]

Will appear if you add top property and value:

#nav {
 display: block;
 width: 110px;
 height: auto;
 margin-top: 20px;
 margin-left: 20px;
 z-index: 1;
 position: fixed;
 top: 0;
}

[supertotem]

Wow man! thank you so much, that was easy!

But now it appears completely at the top, its supposed to be inside a page wrap div that separates the first background image from the rest of the page, so I would like to appear after you scroll down a bit… any ideas?

[Atelierbram]

Try javascript scroll detection, this example is with jQuery:

$(function() {
 $(window).on("scroll", function() {
   var fromTop = $(window).scrollTop();
   console.log(fromTop);
   $("body").toggleClass("has-scrolled", (fromTop > 1100));
  });
}); 

in CSS something like:

#nav { 
 opacity: 0; 
 transition: opacity 2s;
} 
.has-scrolled #nav { 
 opacity:1; 
 }

[Author]

Posts