Treehouse: Grow your CSS skills. Land your dream job.

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

  • # May 20, 2014 at 5:36 am

    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

    # May 20, 2014 at 6:38 am

    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;
    }
    
    # May 20, 2014 at 6:46 am

    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?

    # May 20, 2014 at 6:58 am

    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; 
     }
    
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.