DIV acompanhando o SCROLL até certo ponto

[monteirof7 1]

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á!

[Lucas Santos Brito 12]

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.

[monteirof7 1]

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.

[Natan S. 6]

Aumente o valor até quando você precisa.

[Maykel-ctba 233]

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");
        }
    });
});

[Lucas Santos Brito 12]

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.

[marcelocardoso 6]

obrigado pelas dicas...
ajudou bastante...