9

Here is the jsfiddle: http://jsfiddle.net/NKgG9/

I'm basically wanting those pink boxes to be on show on page load as normal but as soon as a user scrolls down the page I want them to fade out and disappear. When the user scrolls back up to their position or the top of the browser window I want those pink boxes to fade back in again. I'm useless with JS so good do with some help on how to do this.

All help appreciated.

egr103
  • 3,858
  • 15
  • 68
  • 119
  • Do you want them to fadeIn/Out to the level based on the value of the scroll, or just to apply effect as soon as scrolling is detected? – Cheery Feb 24 '12 at 22:22
  • Ideally, fade out when scrolling is detected then fade back in when the user gets back to the top of the browser window – egr103 Feb 24 '12 at 22:27

2 Answers2

13

Very simple example: http://jsfiddle.net/a4FM9/2/

var divs = $('.social, .title');
$(window).scroll(function(){
   if($(window).scrollTop() <10 ){
         divs.stop(true,true).fadeIn("fast");
   } else {
         divs.stop(true,true).fadeOut("fast");
   }
});​
Cheery
  • 16,063
  • 42
  • 57
  • Thats awesome. Cheers for that @Cheery! I've noticed though that there is a problem where the divs blink when you try scrolling up, when you are at the very top of the page. Is there a way of stopping this from happening? – egr103 Feb 24 '12 at 22:58
  • @egr103 replace `if($(window).scrollTop() == 0)` by `if($(window).scrollTop() < 10)`, for example. 10 pixels will not play a very significant role, but will prevent such effect. http://jsfiddle.net/a4FM9/1/ – Cheery Feb 24 '12 at 23:01
  • There is a slight problem though, in that when you are halfway down the page in Firefox and you refresh the page, the two divs show up again. How can I fix this? – egr103 Feb 24 '12 at 23:29
  • @egr103 add `$(window).trigger('scroll');` in `$(document).ready .. ` function for example. – Cheery Feb 24 '12 at 23:38
  • No that doesn't seem to have fixed it but I maybe implementing it wrong: http://jsfiddle.net/a4FM9/3/ – egr103 Feb 25 '12 at 11:07
  • Also I've noticed that it overlaps the content beneath the image, is there a way to control it that it only displays over the big image? – egr103 Feb 25 '12 at 11:33
  • @egr103 Why are you trying to make the script more complex? About reload - it is a behavior of FF, it does not want to trigger the event. Solution was provided to you, which is correct (sorry, I usually sleep at night :)) As of overlap - how do you imagine it? Fadeout takes sometime and made it with fixed position, so it will shift during the scrolling proccess. If you want it to stay over the image all the time, use absolute positioning. Look here http://jsfiddle.net/d8q5R/ – Cheery Feb 25 '12 at 18:13
4

Like this? http://jsfiddle.net/NKgG9/6/

$(function(){ 
    var targets = $(".title, .social");
    if($(window).scrollTop() > 10){
      targets.hide();
    }
    $(window).scroll(function(){
        var pos = $(window).scrollTop();
        if(pos > 10){
            targets.stop(true, true).fadeOut("fast" );
        } else {
            targets.stop(true, true).fadeIn("fast");
        }
    });

});

The basic idea: subscribe to the scroll event. If the scroll position moves past a certain point, start the fade out and likewise if the user scrolls up fade in. Some important details: keep track if you're already fading in/out (variable shown) and stop any ongoing fade if you start a new fade.

Andre Loker
  • 8,368
  • 1
  • 23
  • 36
  • This has the same problem as the first solution, in that when you are halfway down the page in Firefox and you refresh the page, the two divs show up again. How can I fix this? – egr103 Feb 24 '12 at 23:31
  • I've updated the answer. While I couldn't recreate the issue in Firefox, this should stop it: if the window is initially already scrolled, hide the elements. – Andre Loker Feb 24 '12 at 23:42
  • No, unfortunately this doesn't work either.In fact, the fade out doesn't seem to be working either it just hides it abruptly with no effect, however it does fade in again. Weird. – egr103 Feb 25 '12 at 11:11
  • Also I've noticed that it overlaps the content beneath the image, is there a way to control it that it only displays over the big image? – egr103 Feb 25 '12 at 11:38