Here is the code for a .JS file:
$(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');
}
});
This is the CSS class that will be added on scroll down for a specific height:
.sticky{
position: fixed;
top: 0;
}
Contained in my .less file, here is the Navigation Bar code:
.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;
.bf_btns{
a{
display: block;
width: 238px !important;
}
a:last-child{
margin-top: 0px;
}
}
}
}
}
Problem Statement: When the scrollbar height exceeds the height of the header, the Navigation bar becomes fixed due to the Sticky class being applied. However, I want it to show slowly or use a slideDown effect using jQuery. I tried adding a transition to the Sticky class but it didn't work as expected.