Ir para conteúdo
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á!

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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");
        }
    });
});
Editado por Maykel-ctba

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Editado por LucasQuery

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.