Итак, я пытаюсь создать закрепленный раздел с вертикальной навигацией, который переключает активные классы во время прокрутки содержимого. После того, как я начну прокручивать страницу вниз, активные классы начнут меняться, но мой раздел стикеров даже не виден. Это, как jQuery, рассчитывается с самого верха сайта, а не внутри моего липкого раздела. Я надеюсь, ясно, что я пытаюсь объяснить.
HTML
<nav class="sticky-menu">
<ul>
<li><a href="#section1">SECTION 1</a></li>
<li><a href="#section2">SECTION 2</a></li>
<li><a href="#section3">SECTION 3</a></li>
</ul>
</nav>
<div class="sticky-content">
<div id="section1">
CONTENT 1
</div>
<div id="section2">
CONTENT 2
</div>
<div id="section3">
CONTENT 3
</div>
</div>
Div-объекты с липким содержимым имеют высоту 300 пикселей каждый. А в меню-наклейке есть позиция: наклейка сверху: 80px
jQuery(document).ready(function() {
jQuery('a[href*=#]').bind('click', function(e) {
e.preventDefault(); // prevent hard jump, the default behavior
var target = jQuery(this).attr("href"); // Set the target as variable
// perform animated scrolling by getting top-position of target-element and set it as scroll target
jQuery('html, body').stop().animate({
scrollTop: jQuery(target).offset().top
}, 600, function() {
location.hash = target; //attach the hash (#jumptarget) to the pageurl
});
return false;
});
});
jQuery(window).scroll(function() {
var scrollDistance = jQuery(window).scrollTop();
// Show/hide menu on scroll
//if (scrollDistance >= 850) {
// $('nav').fadeIn("fast");
//} else {
// $('nav').fadeOut("fast");
//}
// Assign active class to nav links while scolling
jQuery('.sticky-content div').each(function(i) {
if (jQuery(this).position().top <= scrollDistance) {
jQuery('.sticky-menu li a.active').removeClass('active');
jQuery('.sticky-menu li a').eq(i).addClass('active');
}
});
}).scroll();