Overlay Section

Asked

Viewed 117 times

0

I have more or less the following structure: 

<!DOCTYPE html>
<html lang="pt-BR">
<head></head>
<body>
<div id="tudo">
    <header>
          <nav></nav>
    </header>
    <div id="banner"></div>

    <section id="secao_1">
        <div>   
            conteudo normal 1
        </div>      

        <div>   
            conteudo normal 2
        </div>      
    </section>

    <section id="secao_over">
                    <div>
            conteudo overlay 1
                    <div>

                    <div
            conteudo overlay 2
                    <div>

                    <footer>
                        <div id="conteudo_rodape"></div>
                    </footer>
    </section>
</div>
</body>
</html>

I need that as I scroll down, there will come a time when the #secao_1 section will reach the top of the screen, with this, the #secao_over section should start overwriting the rest of the content, and when I scroll down, the overlay content would go to its position "normal".

In case I haven’t been very clear, just let me know that I’m trying to explain better.

jquery css

  • after conteudo overlay 1 e 2 shouldn’t be </div>?

  • I didn’t understand @Math, if you’re referring to semantics, I drew the above html quickly, just to illustrate the structure.

  • As it’s just to illustrate everything well, it was just something I observed but it’s irrelevant.

  • Many more to go </div> in your HTML. It should look like this: http://jsfiddle.net/c2rPs/ and I still don’t understand what you want to do... I can explain it one more time?

1 answer

1

From what I understand you’re willing to do this: (using jQuery)

$(window).on('scroll', scrolling);
function scrolling () {
    var top = $(document).scrollTop(); 
    var stop = $("#secao_1").offset().top;
    if(top < stop){
        // #secao_over sobrempoe
    }else{
        // #secao_over não sobrepõe
    }
}

  • Hi, Guilherme, welcome to [en.so]. The markdown here is a little different, check out http://answall.com/editing-help

  • Thank you!! Now I understand how you do.

  • Dude, the logic is perfect. But I still don’t know what CSS properties I need to set for the overlay transition to occur. I think it is likely that you will need to set both in the Section that will overlap and that will be overlapped.

  • You could explain a little better then how this overlay would be for me to try to help you with css?

Browser other questions tagged jquery css

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