Fixed Div with Fadein Effect

Question

Opa,

I got a div on the side sidebar_right, when scrolling the page it should go to the footer fixed, I am using so:

    $(function () {

    var jElement = $('#sidebar_right');

    $(window).scroll(function(){
        if ( $(this).scrollTop() > 700 )
        {
            jElement.fadeIn(500);
            jElement.css({
                'position':'fixed',
                'top':'60%',
                'z-index':'999',
                'width':'100%',
                'left':'0',
                'overflow':'scroll',
                'height':'300px',
            });

        }else{

            //jElement.fadeOut(500); Não usado

            jElement.css({
                'position':'relative',
                'top':'auto',
                'overflow':'hidden',
                'height':'auto',
                'z-index':'999',
            });
        }
    });
});

It works normally, but without the effect fadein, the fadein only occurs when I add the fadeout, down in the else. I can’t add the fadeout, Yeah, it’s the same div.

What’s wrong with it?

Answer 1

There is no way to apply the effect fadeIn in a visible element, it serves to "show" an invisible element(display:none or opacity:0) with the effect of fade(increasing the opacity of the element). To have the effect you want to hide the element before calling the fadeIn:

var jElement = $('#sidebar_right');

$(window).scroll(function(){
    if ( $(this).scrollTop() > 700 )
    {
        jElement.hide(0); // esconde o elemento
        jElement.fadeIn(500);
        jElement.css({
            'position':'fixed',
            'top':'60%',
            'z-index':'999',
            'width':'100%',
            'left':'0',
            'overflow':'scroll',
            'height':'300px',
        });

    }else{

        jElement.css({
            'position':'relative',
            'top':'auto',
            'overflow':'hidden',
            'height':'auto',
            'z-index':'999',
        });
    }
});

Answer 2

I did the following:

#sidebar_bottom
{
    position:fixed;
    top:60%;
    z-index:999;
    width:100%;
    left:0;
    overflow:scroll;
    height:300px;
}





    var jElement_right  = $('#sidebar_right');
    var jElement_bottom = $('#sidebar_bottom');

    $(window).scroll(function(){
        if ( $(this).scrollTop() > 700 )
        {
            jElement_right.fadeOut(500);
            jElement_bottom.fadeIn(500);

        }else{
            jElement_bottom.fadeOut(500);
            jElement_right.fadeIn(500);
        }
    });

That is, I added the.php file with a include in different Ivs, while scrolling down a div deletes and the other appears fixed in the footer.

Working perfectly.

Vlw