Jump to content
monteirof7

DIV acompanhando o SCROLL até certo ponto

Recommended Posts

Olá pessoal,

 

Estou desenvolvendo um site, e queria que uma DIV (um retangulo) acompanhasse o SCROLL da pagina ate um certo ponto, do inicio ao final do texto.

O position fixed, somente, nao vai funcionar, uma vez que ele vai dar esse atributo a div pela pagina inteira.

 

Andei lendo alguns artigos e muitos deles usavam JQuery, como sou iniciante ainda não consegui implementar no meu site.

 

o link é esse:

http://mudevidas.com/Pasta%20do%20BSCUE/Como-Estudar-nos-EUA.html

Queria que o retangulo "Passo a Passo" acompanhasse o texto ate o fim, e quando chegasse no rodapé da página parasse. Fazendo com que o usuario nao tenha que ir ate o topo da pagina para mudar de item.

 

Demais observações/sugestões sobre o site sao muito bem vindas.

 

Agradeço desde já!

Share this post


Link to post
Share on other sites

Tente desta forma:

 

Na sua folha de estilos, adicione:

.fix-nav-menu {
     position:fixed;
}

Aqui o código JS:

$("document").ready(function($){
    
    var nav = $('#retangulo');
    
    $(window).scroll(function () {

        /* Digo aqui, que quando a barra de rolagem estiver entre 60px e 800px, o elemento irá ganhar uma nova classe que irá fixa-lo */
        if ($(this).scrollTop() > 60 && $(this).scrollTop() < 800) {
            nav.addClass("fix-nav-menu");
        } else {
            nav.removeClass("fix-nav-menu");
        }
    });
 
});

Altere os limites de rolagem de acordo com a sua necessidade.

Abraços.

Share this post


Link to post
Share on other sites

Olá, funcionou bem. Porém algo chegar nos 800, a div simplesmente volta a sua posição original (no topo da pagina), gostaria que ela permanece aonde parou o position:fixed. Tem como implementar isso?

 

Muito obrigado.

Share this post


Link to post
Share on other sites

Utilizando a base acima, se você entender a lógica, é só ao invés de retirar a classe fix-nav-menu, crie outra classe onde o atributo seja position:absolute, com a altura desejada. Dessa maneira, ficaria parado no píxel determinado.

 

Não testei, mas tente:

.fix-nav-menu {
     position:fixed;
}
.stop-nav-menu {
     position:absolute;
     top:800px;
}
$("document").ready(function($){
    
    var nav = $('#retangulo');
    
    $(window).scroll(function () {

        if ($(this).scrollTop() > 60 && $(this).scrollTop() < 800) {
            nav.addClass("fix-nav-menu");
        } else {
            nav.removeClass("fix-nav-menu");
            nav.addClass("stop-nav-menu");
        }
    });
});
Edited by Maykel-ctba

Share this post


Link to post
Share on other sites

Da forma citada acima, no entanto o código JS ficaria assim:

$("document").ready(function($){
    
    var nav = $('#retangulo');
    
    $(window).scroll(function () {
        
        /* Caso a barra de rolagem seja maior do que 60 e menor do que 800, irá adicionar ao elemento a classe que irá fixa-lo */
        if ($(this).scrollTop() > 60 && $(this).scrollTop() < 800) {
            nav.addClass("fix-nav-menu");
        } 

        /* Caso a barra de rolagem seja maior do que 800, irá adicionar ao elemento a classe que irá torna-lo absoluto, e irá alterar o posicionamento superior para 800px */
        else if ($(this).scrollTop() > 800) {
            nav.removeClass("fix-nav-menu");
            nav.addClass("stop-nav-menu");
        }

        
        /* Caso nenhuma das expressões acima sejam verdadeiras, o elemento voltará ao seu estado normal */
        else {
            nav.removeClass("fix-nav-menu");
            nav.removeClass("stop-nav-menu");
        }
    });
});

Também não testei, mas veja se funciona.

Abraços.

Edited by LucasQuery

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.