sticky menu
by bvotcode
HTML
<div id="header">
<div class="logo">
1Sticky Nav and Nav Highlight on page scroll
</div>
</div>
<div id="navigation">
<ul class="menu">
<li class="first leaf news">
<a href="#news" title="" class="">News</a>
</li>
<li class="leaf tour">
<a href="#tour" title="" class="">Tour</a>
</li>
<li class="leaf video">
<a href="#video" title="" class="">Video</a>
</li>
<li class="leaf music">
<a href="#music" title="" class="">Music</a>
</li>
<li class="leaf photo">
<a href="#photo" title="" class="">Photo</a>
</li>
<li class="leaf album last">
<a href="#album" title="" class="">Album</a>
</li>
</ul>
</div>
<div id="content">
<div id="news">
News
</div>
<div id="tour">
Tour
</div>
<div id="video">
Video
</div>
<div id="music">
Music
</div>
<div id="photo">
Photo
</div>
<div id="album">
Album
</div>
</div>
<div id="footer">
<div class="footer-tos">
<a href="" target="_blank">Privacy Policy</a> | <a href="" target="_blank">Terms of Service</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>CSS
body {
background: none #000;
margin: 0;
}
.logo {
text-transform: uppercase;
color: burlywood;
text-align: center;
font-size: 3vw;
font-family: cursive;
height: 90vh;
}
.sticky .logo{
height: 0;
}
ul.menu {
text-align: center;
list-style-type: none;
margin: 0;
padding: 2vh 0;
}
.sticky ul.menu {
padding: 1vh 0;
position: fixed;
width: 100%;
top: 0;
left: 0;
background: none #000;
}
ul.menu li {
display: inline-block;
vertical-align: middle;
list-style-type: none;
margin: 0 2vw 0 0;
}
ul.menu li.last {
margin: 0;
}
ul.menu li a {
text-decoration: none;
text-transform: uppercase;
font-size: 2vw;
font-family: cursive;
opacity: 1;
}
ul.menu li a.active, ul.menu li a:hover {
opacity: 0.6;
}
ul.menu li.news a {
color: #36d341;
}
ul.menu li.tour a {
color: #ff25e8;
}
ul.menu li.video a {
color: #7353ff;
}
ul.menu li.music a {
color: #3dc6ff;
}
ul.menu li.photo a {
color: #ecee24;
}
ul.menu li.album a {
color: #fa6d27;
}
#content > div {
padding: 45vh 0;
text-align: center;
text-transform: uppercase;
font-size: 2vw;
font-family: monospace;
}
#content #news {
background: -moz-linear-gradient(-34deg,#3434f7 0%,#34c8ff 50%,#27ef77 100%);
background: -webkit-linear-gradient(-34deg,#3434f7 0%,#34c8ff 50%,#27ef77 100%);
background: -o-linear-gradient(-34deg,#3434f7 0%,#34c8ff 50%,#27ef77 100%);
background: -ms-linear-gradient(-34deg,#3434f7 0%,#34c8ff 50%,#27ef77 100%);
background: linear-gradient(124deg,#3434f7 0%,#34c8ff 50%,#27ef77 100%);
}
#content #tour {
background: -moz-linear-gradient(-34deg,#ecee24 0%,#EC4e24 50%,#fa6d27 100%);
background: -webkit-linear-gradient(-34deg,#ecee24 0%,#EC4e24 50%,#fa6d27 100%);
background: -o-linear-gradient(-34deg,#ecee24 0%,#EC4e24 50%,#fa6d27 100%);
background: -ms-linear-gradient(-34deg,#ecee24 0%,#EC4e24 50%,#fa6d27...JavaScript
jQuery(window).bind('scroll', function() {
var navHeight = jQuery('ul.menu').height();
if (jQuery(window).scrollTop() > navHeight) {
jQuery('body').addClass('sticky');
} else {
jQuery('body').removeClass('sticky');
}
jQuery("#content > div").mouseenter(function() {
var id = jQuery(this).attr('id');
jQuery('ul.menu li a').removeClass("active");
jQuery('ul.menu li a[href=#' + id + ']').addClass('active');
});
});