Important nautical show with jQuery slideDown Slow
JS file code
$(document).scroll(function (){
var menuheight= $('header').height();
var y = $(this).scrollTop();
if (y>(menuheight))
{
$('.menu_nav_features').addClass('sticky');
}
else{
$('.menu_nav_features').removeClass('sticky');
}
});
.Css code class
to add to scroll down for specific file height
.sticky{
position: fixed;
top: 0;
}
This is my .lessNavigation Bar
code . (for information)
.menu_nav_features{
width: 100%;
height: 46px !important;
border-bottom: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
.menu-features{
margin-top: 0px;
width: 1200px !important;
list-style:none;
margin-left: -35px;
li{
display: inline;
.transition;
a{
background: #f4f4f4;
margin-right:-3px;
display: inline-block;
text-decoration: none;
color:#444444;
padding:0px 30px;
line-height: 44px;
.transition;
}
a:active, a:hover{
color: #000;
background: #fdfdfd;
}
}
li:nth-child(2):hover .bf{
.displayall;
.transition;
}
.bf{
display: none;
position: absolute;
margin-left: 134px;
padding-top: 7px;
// top: 50px;
.bf_btns{
a{
display: block;
width: 238px !important;
}
a:last-child{
margin-top: 0px;
}
}
}
}
}
Challenge: If the height of the scrollbar is greater than my height Header
, then my navigation bar will fix the cause Sticky
class
. This will display immediately and I want to show it slowly or something like slideDown
JQuery.I add tranistion
to Sticky
Class but nothing happened.
source to share