Question

This question sort of relates to this one: Append div to body when URL hash # changes

I’m using Curtain.js and currently I have a fixed div that pops up when the hash changes. I.E the div fades in when the user scrolls down the page to different panels. I don’t want this div to be visible on the first panel.

The problem I now have is that when the visitor scrolls back up the page to the top the fixed div is still visible. I.e. appearing on top of the first panel. I would like to fade that div out as soon as it hits the bottom of that first panel. The other issue is that the panel’s height adjusts to the height of the browser window (fluid/responsive layout) ruling out any fixed pixel JS solutions, which is what my code is based on:

    // fade in/fade out banner titles
$(window).trigger('scroll');

var divs = $('.nav-wrap'); 
$(window).scroll(function(){
   if($(window).scrollTop() < 550){
         divs.fadeOut("slow");
   } else {
         divs.fadeIn("slow");
   }
});

Anyone have any suggestions??

Answer 1

you can use window.height() which returns the height of the browser’s viewport:

var vp = $(window).height(); // height of the browser's viewport
var divs = $('.nav-wrap'); 
$(window).scroll(function(){
   if($(window).scrollTop() < vp){
         divs.fadeOut("slow");
   } else {
         divs.fadeIn("slow");
   }
});