How to take a floating div after a certain scroll

Asked

Viewed 244 times

1

I’m here at my job, and I’m having a problem here on the website.

I have a lateral div that has a code js to stay fixed on the page (floating) as soon as it reaches top0 (follow the link below)

inserir a descrição da imagem aqui

  $(function(){

var jElement = $('.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'
        });
    }
});

While the photo on the left keeps rolling, the div on the right is fixed on the screen.

inserir a descrição da imagem aqui

The problem is that, when you reach the end of the left photo, div keeps rolling down, causing her to get in front of the baseboard and ruin everything.

inserir a descrição da imagem aqui

How do I get the floating div on the right to stop as soon as the photo on the left ends?

Help me if I won’t get fired (joke) kk

javascript html jquery

  • From what I understand you just want the div not to overlap the footer, stopping before him?

  • yes... the div stop before it... without needing it to descend until the end

  • Have you tried changing the position of relative for Absolute?

  • I would suggest putting z-index: -1 in the .element... so when you get to the footer, the floating div will be under the footer. Make it "stop" and then come back is very complicated.

  • Or a z-index in the footer so that it is on top.

1 answer

0

I’ll paste a code that I use here and maybe adapting will help you, okay?

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

It checks whether the scroll position is greater than "500" and whether the window width is greater than "680" (for reasons of responsiveness) and then hide or show the div #Fixed. You can use show() and Hide() instead of fadein() and fadeOut() if you prefer :)

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.