Overlay Section

Question

Overlay Section

Navigation

#1 by (1 votes)

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 the scroll bar comes down, there will come a time when the section # secoo_1 will reach the top of the screen, so the section #secao_over should start overlapping the rest of the content, and when you go down the bar the overlay content would move to its "normal" position.

If it was not very clear, just let me know what I'm trying to explain.

jquery css

asked by anonymous 27.06.2014 / 16:48

1 answer

Application for the android generator in version X Ev3 of GeneXus Force import of css and js into site pages

score 1 · Answer 1

From what I understand, you want 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
    }
}