Error Menu Appears Slowly

Question

Error Menu Appears Slowly

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

So I'm having problems with if else and with hide (), show ()

I'm creating my portfolio 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 works fine, however, whenever I'm moving the scroll bar it hides itself and then it pops up, and I do not want it to add up every time I scroll, I just want it to pop when the bar scrolling to scrolltop height 70

javascript html jquery css

asked by anonymous 09.01.2017 / 22:54

2 answers

I need to add a cell from a html table dynamically Pass sequence of steps (methods) to window (wpf)

score 1 · 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><divid="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>

score 0 · Answer 2

Then I was able to solve it as follows

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





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


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