Div Fixed with FadeIn effect

Question

Div Fixed with FadeIn effect

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

Opa,

I have a div on the side sidebar_right , when scrolling the page it should go to the fixed footer, I'm using it like this:

    $(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 fadein effect, fadein only occurs when I add fadeout , there else . I can not add fadeout because it is the same div.

What's wrong?

javascript css

asked by anonymous 18.06.2016 / 14:17

2 answers

Improving socket performance in C # How to use the Npgsql reference for framework versions smaller than 4.5?

score 0 · Answer 1

There is no way you can apply the fadeIn effect to a visible element, it serves to "show" an invisible element ( display:none or opacity:0 ) with the effect of fade (increasing element opacity) . To have the effect you want to hide the element before calling 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',
        });
    }
});

score 0 · Answer 2

I've done 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 an include in different divs, when the screen goes down one div clears and the other one is fixed on the rod.

Running perfectly.

Vlw