0

entao pessoa estou tendo problemas com o if else e com a função hide(), show()

estou criando meu portifolio e quero que o menu seja fixo a partir do scrolltop 70 e quero que ele apareça lentamente

entao eu fiz o seguinte

           if($(window).scrollTop() > 70){
               $("#navegacao").hide()
           }  



           if ($(window).scrollTop() > 71){
                $("#navegacao").show("slow")
           }

esta dando certo porem sempre que eu estou movendo a barra de rolagem ela se esconde e logo em seguida ela aparece, e eu não quero que ela suma toda vez qu eu movimentar o scroll, eu quero somente que ela suma quando a barra de rolagem chegar na altura 70 do scrolltop

2 Respostas 2

1

Você pode usar transition: linear 0.2s usando jQuery. Veja abaixo como ficaria:

jQuery("document").ready(function($){
	
	var nav = $('#nav-main');
	
	$(window).scroll(function () {
		if ($(this).scrollTop() > 70) {
			nav.addClass("fixed-nav");
		} else {
			nav.removeClass("fixed-nav");
		}
	});

});
.fixed-nav { 
	z-index: 9999; 
	position: fixed; 
	top: 0; 
	width: 95%;
	border: 10px solid transparent;
	max-width: 1133px;
	background-color: #3B5998;
	margin: 0 -10px !important;
	padding: 2px 5px !important;
    color: #ffffff;
  
    transition: linear 0.2s;
} 


/* Fix for Mobile Devices 
----------------------------------------*/
@media only screen and (max-width: 350px), only screen and (max-device-width: 350px) {
	.fixed-nav {
	border-radius: 0;
	}
}

@media only screen and (max-width: 320px), only screen and (max-device-width: 320px) {
	.fixed-nav {
	border-radius: 0;
	}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav-main">home - sobre - portifólio - contato</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at dignissim erat. Cras vulputate finibus sollicitudin. Duis id risus pretium, aliquet dolor in, auctor nibh. Nunc nunc urna, tincidunt eu lacus vitae, rhoncus convallis nibh. Sed ut odio justo. Proin luctus commodo mi, ut maximus tellus blandit at. Vivamus vitae dui euismod, suscipit risus sit amet, porttitor urna. Pellentesque eget pellentesque erat, eu tincidunt est. Vestibulum nunc erat, dictum vitae erat vitae, pretium pharetra diam. In fringilla, tortor quis lacinia finibus, lacus leo viverra felis, ac condimentum ipsum sapien vitae eros. Nulla facilisi.</p>
<p>space</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at dignissim erat. Cras vulputate finibus sollicitudin. Duis id risus pretium, aliquet dolor in, auctor nibh. Nunc nunc urna, tincidunt eu lacus vitae, rhoncus convallis nibh. Sed ut odio justo. Proin luctus commodo mi, ut maximus tellus blandit at. Vivamus vitae dui euismod, suscipit risus sit amet, porttitor urna. Pellentesque eget pellentesque erat, eu tincidunt est. Vestibulum nunc erat, dictum vitae erat vitae, pretium pharetra diam. In fringilla, tortor quis lacinia finibus, lacus leo viverra felis, ac condimentum ipsum sapien vitae eros. Nulla facilisi.</p>
<p>space</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at dignissim erat. Cras vulputate finibus sollicitudin. Duis id risus pretium, aliquet dolor in, auctor nibh. Nunc nunc urna, tincidunt eu lacus vitae, rhoncus convallis nibh. Sed ut odio justo. Proin luctus commodo mi, ut maximus tellus blandit at. Vivamus vitae dui euismod, suscipit risus sit amet, porttitor urna. Pellentesque eget pellentesque erat, eu tincidunt est. Vestibulum nunc erat, dictum vitae erat vitae, pretium pharetra diam. In fringilla, tortor quis lacinia finibus, lacus leo viverra felis, ac condimentum ipsum sapien vitae eros. Nulla facilisi.</p>
<p>space</p>

<p>space</p>
<p>space</p>
<p>space</p>
<p>space</p>

0

então consegui resolver da seguinte maneira

       if($(window).scrollTop() <= 70){
               $("#navegacao").hide()
           }  





           if($(window).scrollTop() >= 70){
               $("#navegacao").show("slow")
           }  


            else{
                $("#navegacao").show("slow")
           }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .