Эй, я довольно новичок в начальной загрузке и Jquery и начал использовать scrollspy с навигационной панелью, что хорошо работает. И это выглядит так:
<body data-spy="scroll" data-target=".navbar" data-offset="65" onload="typeWriter()">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top" style="opacity:0.4;">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section4"> Section 4</a>
</li>
</ul>
</nav>
Затем я добавил функцию, активированную прокруткой, и она перестала работать. Я думаю, что функция множественной прокрутки создает проблему, но не знаю, как с этим справиться.
<script type="text/javascript">
function getScrollTop(){
if(typeof pageYOffset!= 'undefined'){
return pageYOffset;
}
else{
var b = document.body; //IE 'quirks'
var d = document.documentElement; //IE with doctype
d = (d.clientHeight)? d : b;
return d.scrollTop;
}
}
$(window).on("scroll", function(){
if(getScrollTop() >= 500){
$(window).off("scroll");
jQuery('.skillbar').each(function(){
jQuery(this).find('.skillbar-bar').animate({
width:jQuery(this).attr('data-percent')
},4500);
});
};
});
</script>
Там я отслеживаю прокрутку и, когда достигаю div, хочу анимировать некоторые полосы, затем удаляю трекер прокрутки, чтобы анимировать только один раз.
Так что да, после добавления этой функции, которая работает хорошо, но навигационная панель перестала отслеживать, где находится страница.
Я надеюсь, что есть решение для этого, потому что я также хочу использовать другое отслеживание прокрутки позже для анимации временной шкалы. : D