How to draw a floating div after a certain scroll

Question

How to draw a floating div after a certain scroll

Navigation

#1 by (0 votes)

1

I'm here at work, and I have a problem here at the site I'm touching.

I have a side div that has a js code to stay fixed on the page (floating) as soon as it arrives in top0 (follow the link below) p>

$(function(){varjElement=$('.element');$(window).scroll(function(){if($(this).scrollTop()>835){jElement.css({'position':'fixed','top':'10px','width':'50%','margin-left':'50%',//'height':'1500px'});}else{jElement.css({'position':'relative','top':'auto','width':'50%','margin-left':'auto'});}});

Asthephotoontheleftcontinuestoscroll,therightdivisfixedonthescreen.

Theproblemisthat,whenitreachestheendoftheleftphoto,thedivcontinuesscrollingdown,causingittostepinfrontofthefooterandspoileverything.

How do I make the floating div on the right side stop as soon as the photo on the left is gone?

Help me, if I'm not going to get fired (joking) kk

javascript html jquery

asked by anonymous 15.05.2018 / 17:24

1 answer

WebService Sefaz Running multiple instances of the same application on a single Memcached Server

score 0 · Answer 1

I'm going to paste a code I use here and maybe adapting it helps, ok?

//Topo fixo
$(window).bind('scroll', function () {
    if ($(window).scrollTop() > 500 && $(window).width() > 680) {
        $('#fixed').fadeIn();
    } else {
        $('#fixed').fadeOut();
    }
});

It checks to see if the scroll position is greater than "500" and if the width of the window is greater than "680" (for reasons of responsiveness) and it hides or shows the div #fixed. You can use show () and hide () instead of fadeIn () and fadeOut () if you prefer:)