1

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??

Community
  • 1
  • 1
egr103
  • 3,858
  • 15
  • 68
  • 119
  • what is the problem of your current solution? – Ram Jul 12 '12 at 18:31
  • Well the code only fades the div in/out 550 pixels from the top of the browser window which leads to differing results on different sized screens. It currently fades out over the top panel, I'd like it to fade out as soon as the fixed div hits the bottom of the first panel so it fades out underneath it. – egr103 Jul 12 '12 at 18:33
  • Looks like also the [official webpage](http://curtain.victorcoulon.fr) has currently the problem to display correctly in Firefox. Suddenly everything disappears from monitor. Otherwise it seems to be nice plugin! – Stano Jul 12 '12 at 18:40
  • @Stano What are you seeing? I can't see a problem with my version (I have latest build)?? – egr103 Jul 12 '12 at 18:43
  • @egr103 In Firefox blank screen after a few seconds. Tested it also in Chrome, Explorer and Opera and there it works well. I just sent the bug report to Mozilla, but it's strange that Firebug console shows no error. Hopefully only on my pc. Have you tested it too? – Stano Jul 12 '12 at 18:50
  • Yeah seems fine for me. All working well. Odd. – egr103 Jul 12 '12 at 19:01
  • Disabled all 16 addons in Firefox and tested the Curtain plugin, all worked well until I enabled [HTML Validator addon](https://addons.mozilla.org/firefox/addon/html-validator/). When validator is disabled, curtains work well. So it's only minor issue. – Stano Aug 14 '12 at 11:09

1 Answers1

0

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");
   }
});
Ram
  • 143,282
  • 16
  • 168
  • 197
  • Works a treat thanks! Simple but I'm learning JS as I go. One day at a time :) – egr103 Jul 12 '12 at 18:44
  • @egr103 you are welcome, me too, I'm learning like you, it sounds that you are learning very well, good luck :) – Ram Jul 12 '12 at 19:04