Я пытаюсь найти решение, но не могу. мой шпион с прокруткой не работает
это навигация html.
<nav class="menu">
<ul>
<li><a class = "active" href="#" data-scroll = "home">Home</a></li>
<li><a href="#" data-scroll = "about">About</a></li>
<li><a href="#" data-scroll = "about">Our Work</a></li>
<li><a href="#" data-scroll = "about">Clients</a></li>
<li><a href="#" data-scroll = "about">Contact</a></li>
</ul>
</nav>
My nav CSS JUST INCASE, потому что я думаю, что есть проблема с CSS, но на веб-сайте он выглядит нормально, и эффекты зависания и активные работают, но не прокрутка.
.menu{
z-index: 100;
position: fixed;
top: 0;
left: 25%;
width: 50%;
overflow: hidden;
background-color: transparent;
/* padding: 20px 0; */
}
.menu ul{
margin: 5px;
padding: 0;
text-align: center;
}
.menu ul li{
list-style: none;
margin:0 20px ;
display: inline;
}
.menu ul li a {
color: black;
font-size: 1em;
line-height: 1em;
text-transform: uppercase;
text-decoration: none;
padding: 3px 8px;
transition: 0.5s;
}
.menu ul li a.active{
border-bottom: 1px solid black;
border-top: 1px solid black;
color: #FFC300 ;
}
.menu ul li:hover{
border-bottom: 1px solid black;
}
/* On scroll */
.menu.scroll{
background: yellow;
}
И мой jquery / javascript. Я новичок в работе с Jquery, поэтому я не уверен, верен ли этот код, и большая часть кода в Интернете не работает для меня.
$('nav a').on('click', function() {
var scrollAnchor = $(this).attr('data-scroll'),
scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 28;
$('body,html').animate({
scrollTop: scrollPoint
}, 500);
return false;
})
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 100) {
$('nav').addClass('fixed');
$('.content section').each(function(i) {
if ($(this).position().top <= windscroll - 20) {
$('.menu ul li a.active').removeClass('active');
$('.menu ul li a ').eq(i).addClass('active');
}
});
} else {
$('nav').removeClass('fixed');
$('.menu ul li a.active').removeClass('active');
$('.menu ul li a.first').addClass('active');
}
}).scroll();
Кто-нибудь, у кого есть хороший совет или учебное пособие, к которому я могу обратиться?