0

I'm trying to fadeOut a DIV that contains an image and then have the DIV switch to display:none so links under the DIV are clickable.

I'm doing this as I want the image to stick to the bottom left of the page.

I have:

<script>
jQuery(function( $ ){


    function fade_home_top() {
        if ( $(window).width() > 800 ) {
        window_scroll = $(this).scrollTop();
            $(".mom-son").css({
                  'opacity' : 1-(window_scroll/300)
            });
        }
    }
    $(window).scroll(function() { fade_home_top(); });

});
</script>

The ideal would be the DIV (therefore image) fadeOut on scroll and then display:none

I'm using ScrollTo.js.

Here's a JSFiddle

8
  • fiddle pls!!!!!!!!!!!!
    – Jain
    Jul 12, 2014 at 0:38
  • as you want to fadein or fadeout on scroll
    – Jain
    Jul 12, 2014 at 0:39
  • new to this so will attempt a fiddle. Jul 12, 2014 at 0:39
  • ok so do u fadein on scroll or fadeout
    – Jain
    Jul 12, 2014 at 0:47
  • as the page moves down it fades out. as it moves up it fades back in. Jul 12, 2014 at 0:50

2 Answers 2

1
jQuery(function( $ ){
    function fade_home_top() {
        if ( $(window).width() > 800 ) {
            var window_scroll = $(this).scrollTop();
            $(".mom-son").css({opacity:1-window_scroll/300});
            if(1-window_scroll/300 <= 0){
                $(".mom-son").css({display:'none'});
            }
            else
            {
                $(".mom-son").css({display:'block'});
            }
        }
    }
    $(window).scroll(fade_home_top);
});

Basically, add a check to see if the opacity is less than or equal to zero. if it is, set display to none. else, display block. window_scroll should be declared. Also, pass a reference to the function. no need to call an anonymous function that just calls the other function.

http://jsfiddle.net/PWLR8/5/

4
  • Hi Kai I checked your fiddle. It is not coming back over here as well. What can be the reason?
    – V31
    Jul 12, 2014 at 1:33
  • It does for me. I'm on chrome on mac. What browser are you on?
    – Kai Qing
    Jul 12, 2014 at 1:34
  • I'll have to check from home later
    – Kai Qing
    Jul 12, 2014 at 1:48
  • ha... $(window).width() is resolving to the width of the fiddle viewport. My work monitor is huge so it probably met the 800px requirement. If you try this code on a normal site it should work so long as the window is greater than 800px wide. For the fiddle, change that to like 400 and see if it works for you then.
    – Kai Qing
    Jul 12, 2014 at 5:01
0

You can use the jquery fadeOut function. Please check the fiddle and let me know.

Code Snippet:

function fade_home_top() {
    if ( $(window).width() > 800 ) {
    window_scroll = $(this).scrollTop();
        if(1-window_scroll/300){
             $(".mom-son").fadeOut();
        }
    }
}

In order to check out increase the output window width as we have set window width> 800 check

Updated Answer (As per Kai's suggestion)

I have now added fadeIn() for the else part to get the element back on.

Updated Fiddle

Updated Code:

function fade_home_top() {
        if ( $(window).width() > 800 ) {
        window_scroll = $(this).scrollTop();
            if (window_scroll >= ($(document).height() - $(window).height()) || window_scroll ==0){
                $(".mom-son").fadeIn();
            }
            else {
                 $(".mom-son").fadeOut();
            }
        }
    }
5
  • i wouldnt use fadeout. Also, you'll want an else in there or it will never come back. see this fiddle: jsfiddle.net/PWLR8/5
    – Kai Qing
    Jul 12, 2014 at 1:17
  • @user3634131: Whose fiddle Kai or mine or both?
    – V31
    Jul 12, 2014 at 1:24
  • @V31 - yours faded out, but not back in. it needs an else statement and fadeOut is an animated method, so it might conflict with opacity settings on a scroll listener.
    – Kai Qing
    Jul 12, 2014 at 1:25
  • I think he is handling the opacity setting in order to have the fadeOut effect
    – V31
    Jul 12, 2014 at 1:57
  • true, but you're calling fadeOut on an element whose opacity is already 0, and while this may technically work, it might be better to call show() or hide() which are instantaneous and equal to display block/none. cause if you are scrolling from 0, you are animating the opacity of an element at the same time as setting its opacity on the scroll event. I'm not sure there are side effects. It might be perfectly fine. But it also may not be the most process friendly decision. Still an option though.
    – Kai Qing
    Jul 12, 2014 at 5:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.