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)