Mudar atributos CSS da DIV quando o SCROLL chegar a certo ponto
Obs: Esse tópico tem relação com esse aqui tava tentando fazer com base nele mas não consegui e abri esse.
Bem galera tô querendo fazer uma movimentação na div, que quando o scroll chegar a determinado ponto quero que a div mude seus atributos CSS tipo o campo de busca desse site quando rola o scroll até determinado ponto ele sobe...
meus html, css e js
<div class="busca">
<form name="form_busca" action="busca.php">
<input type="text" name="buscar" placeholder="Buscar supermercado, pizzaria, armazém e etc..." required=""/>
<button class="btnbusca">BUSCAR</button>
</form>
</div>
.fix-nav-menu {
background: #ff0000;
margin: 5px 300px;
z-index: 1;
position: fixed;
}
.stop-nav-menu {
z-index: 1;
}
.busca{position: absolute;float: left;margin:275px 300px;width: 580px;height: auto;background: #FFFFFF;border-radius: 5px;}
<script type="text/javascript">
$("document").ready(function($){
var nav = $('.busca');
$(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");
}
});
});
</script>
aí tipo com esses códigos ele tá inserindo a classe mas não tá substituindo as atribuições no CSS(Em anexo)

Discussão (1)
Carregando comentários...