monteirof7 1 Denunciar post Postado Janeiro 31, 2015 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
Lucas Santos Brito 12 Denunciar post Postado Janeiro 31, 2015 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
monteirof7 1 Denunciar post Postado Janeiro 31, 2015 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
Natan S. 6 Denunciar post Postado Janeiro 31, 2015 Aumente o valor até quando você precisa. Compartilhar este post Link para o post Compartilhar em outros sites
Maykel-ctba 233 Denunciar post Postado Fevereiro 3, 2015 (editado) 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 Fevereiro 3, 2015 por Maykel-ctba Compartilhar este post Link para o post Compartilhar em outros sites
Lucas Santos Brito 12 Denunciar post Postado Fevereiro 3, 2015 (editado) 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 Fevereiro 3, 2015 por LucasQuery Compartilhar este post Link para o post Compartilhar em outros sites
marcelocardoso 6 Denunciar post Postado Julho 17, 2019 obrigado pelas dicas... ajudou bastante... Compartilhar este post Link para o post Compartilhar em outros sites