The sliding navigation isnt working on the site. it jumps to random places and some of the buttons dont work correctly. If i click on some of the buttons, it doesnt do anything but some of the buttons end up sliding to the wrong part of the page. Is there something wrong with the js? This is my html
<ul class="sliding-nav__ul">
<li class="sliding-nav__li active">
<a href="#unleash-your-possibilities" alt="Unleash your possibilities" title="Unleash your possibilities" class="sliding-nav__a">Unleash your possibilities</a>
</li>
<li class="sliding-nav__li">
<a href="#embedded-payments" alt="Embedded Payments" title="Embedded Payments" class="sliding-nav__a">Embedded Payments</a>
</li>
<li class="sliding-nav__li">
<a href="#low-risk" alt="Low Risk" title="Low Risk" class="sliding-nav__a">Low Risk</a>
</li>
<li class="sliding-nav__li">
<a href="#real-world-guidance" alt="Real World Guidance" title="Real World Guidance" class="sliding-nav__a">Real World Guidance</a>
</li>
<li class="sliding-nav__li">
<a href="#own-the-future" alt="Own The Future" title="Own The Future" class="sliding-nav__a">Own The Future</a>
</li>
<li class="sliding-nav__li">
<a href="#transformation-stories" alt="Transformation Stories" title="Transformation Stories" class="sliding-nav__a">Transformation Stories</a>
</li>
<li class="sliding-nav__li">
<a href="#personalized-solution" alt="Personalized Solution" title="Personalized Solution" class="sliding-nav__a">Personalized Solution</a>
</li>
<li class="sliding-nav__li">
<a href="#the-latest" alt="The Latest" title="The Latest" class="sliding-nav__a">The Latest</a>
</li>
<li class="sliding-nav__li">
<a href="#monetize" alt="Monetize, scale, win" title="Monetize, scale, win" class="sliding-nav__a">Monetize, scale, win</a>
</li>
</ul>
and this is the js
(function ($) {
$(window).on("scroll", function() {
var currentPos = $(window).scrollTop();
$('.sliding-nav li a').each(function() {
var sectionLink = $(this);
// capture the height of the navbar
var headerHeight = $('.header').outerHeight() + 100;
var section = $(sectionLink.attr('href'));
// subtract the navbar height from the top of the section
if (section.length) {
if(section.position().top - headerHeight <= currentPos && sectionLink.offset().top + section.height()> currentPos) {
$('.sliding-nav li').removeClass('active');
sectionLink.parent().addClass('active');
//console.log(section);
} else {
sectionLink.parent().removeClass('active');
//console.log(sectionLink);
}
}
});
});
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function (event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
if ($(window).width() < 1024) {
var scrollToPosition = $(target).offset().top - 70;
} else {
var scrollToPosition = $(target).offset().top - 70;
}
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: scrollToPosition
}, 1000, function () {
// Callback after animation
// Must change focus!
});
}
}
});
})(jQuery);