Im пытается использовать scroll-spy, чтобы добавить активный класс к ul li на прокрутке на одну страницу и липкий nav, по какой-то неизвестной причине я не могу получить эту работу с помощью - в моем проект. Ниже приводится расположение моего меню:HTML Bootstrap 3 не добавляет активный класс в UL LI
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<nav class="navbar navbar-default navbar-fixed-top my-nav" role="navigation">
<div class="container_full height">
<div class="navbar-header page-scroll height">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo-holder">
<img class="" src="img/logo-p.png"/>
<span>
<a class="page-scroll" href="#home-page">xxxxxx</a>
<i>xxxxxxx</i>
</span>
</div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse height">
<ul class="nav navbar-nav height">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#home-page">item1</a>
</li>
<li>
<a class="page-scroll" href="#item2">item2</a>
</li>
<li>
<a class="page-scroll" href="#item3">item3</a>
</li>
<li>
<a class="page-scroll" href="#item4">item4</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container_full" id="site">
<section class="parallax">
<!-- HOME PAGE DISPLAY -->
<div id="home-page" class="home-g height-650">
<div class="parallax-layer parallax-back height-650" >
<div class="home">
</div>
//many divs css parallax--
СЧ расслоения плотного файл ниже:
$('.parallax').scroll(function() {
if ($('.parallax').scrollTop() > 100) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
$(".my-nav").addClass("nav-resize");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
$(".my-nav").removeClass("nav-resize");
$(".moveLogo").removeClass("moveLogo-resize");
}
});
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
var position = $($anchor.attr('href')).offset().top + $('.parallax').scrollTop() ;
$('html,body,.parallax').stop().animate({
scrollTop: position
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
Если я должен был использовать вышеупомянутый метод без параллакса дивы и т.д., это будет работать без каких-либо проблем, но на данный момент класс li активен всегда на последний элемент li при прокрутке страницы.
зеленый = прокручивать-состоянии содержимое внутри родительского контейнера «Синий», зеленый дивы являются целевой идентификаторы.
.blue{
height:100%;
width:100%;
overflow:hidden;
}
.green // Has many divs
Я пробовал очевидное, чтобы нацелить зеленые> divs, но он, похоже, не работает.
Как насчет создания jsfiddle? Это может помочь вам помочь – Subash
Я не понимаю, вы, похоже, не используете функцию 'scrollspy' Boostrap? – joshhunt
Из того, что я прочитал в документах, меня ограничивает только относительное позиционирование. Поскольку параллакс использует абсолютное позиционирование, мне нужно будет создать скрипт для обнаружения div и поместить класс ul li по мере необходимости. В это время js скрипка будет длительной. – Careen