Menu error appear slowly

Question

then person I am having problems with if I and with function Hide(), show()

I am creating my portifolio and I want the menu to be fixed from scrolltop 70 and I want it to appear slowly

then I did the following

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



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

it’s working but whenever I’m moving the scroll bar it hides and soon after it appears, and I don’t want it to disappear every time I move the scroll, I just want it to disappear when the scrollbar arrives at the height 70 of the scrolltop

Answer 1

You can use transition: linear 0.2s using jQuery. See below how it would look:

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>

Answer 2

so I was able to solve it this way

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





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


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