Prośba o pomoc z JS

Question

Cześć, czy mógłby ktoś zerknąć na ten kod (wspieram się jednym z kursów bootstrap)? Chciałbym uzyskać efekt przemieszczającej się ramki wraz ze znacznikiem zakotwiczonym do poszczególnych elementów. Czyli na początku przycisk Home posiada obramowanie, następnie jeśli przescrolluje stronę do aktualności to obramowanie przechodzi na przycisk Aktualności itd. Niestety coś w tym kodzie nie działa :? Dodatkowo kod w JS miał upłynnić przejścia między tymi elementami (opcja ta działa). Poniżej przesyłam kody, z góry dzięki za pomoc ! :)

 

<header id="menu" class="navbar-fixed-top">
	<div class="container">
		<div class="col-xs-24 col-sm-24 col-md-24 col-lg-24">
			<nav class="navbar navbar-custom" role="navigation" id="pasek_nawi">
				<div>
					<div class="container-fluid">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#moje-menu">
                                <span class="sr-only">Nawigacja</span>
                                <span class="icon-bar" style="backgroud-color:black;"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
							<div id="logo">
                                <a class="navbar-brand" href="http://www.4light.pl"><img src="img/4light70.jpg" class="img-responsive" alt=""></a>
                            </div>
						</div>
						<div class="collapse navbar-collapse" id="moje-menu">
							<ul class="nav navbar-nav navbar-right" id="ul_nawigacja">
								<li class="active"><a href="#">Home</a></li>
								<li><a href="#aktualnosci">Aktualności</a></li>
								<li><a href="#pracownia">Pracownia</a></li>
								<li><a href="#produkty">Produkty</a></li>
								<li><a href="#realizacje">Realizacje</a></li>
								<li><a href="#kontakt">Kontakt</a></li>
							</ul>
						</div>
					</div>
				</div>
			</nav>
		</div>
	</div>
</header>

#menu{
	background-color: white;
}

.navbar{
	background-color: white;
	font-size: 14px;
	color: black;
	border-color: white;
}

.navbar-nav{
	padding-top: 18px;
}

.navbar-custom .navbar-toggle .icon-bar {
	background: black;
}

.navbar-outer{
	width: 1200px;
}

.navbar-custom .navbar-nav > li > a{
	color: black;
	margin-left: 15px;
	border: 2px solid transparent;
	line-height: 1px;
	font-weight: bold;
	border-radius: 8px;
}

.navbar-custom .navbar-nav > .active > a{
	display: block;
	color: black;
	border-color: black;
	background-color: white;
	border-radius: 8px;
}

.navbar-custom .navbar-nav > li > a:visited{
	color: black;
}

.navbar-custom .navbar-nav > .active > a:visited{
	color: black;
	background-color: white;
}

.navbar-custom .navbar-nav > li > a:hover{
	display: block;
	color: #663333;
	border: 2px solid transparent;
	border-color: #663333;
	line-height: 1px;
	font-weight: bold;
	border-radius: 8px;
	background-color: white;
	transition: all 0.7s ease;
}

.navbar-custom .navbar-nav > .active > a:hover{
	background-color: white;
	color: #663333;
}	

#logo img{
	display: block;
	float: none;
	margin-top:-14px;	
}

// Animacja górnego menu oraz animacje po przewinięciu 

var lastId,
    topMenu = $("#ul_nawigacja"),
    topMenuHeight = topMenu.outerHeight()+15,
    // Wszystkie elementy listy
    menuItems = topMenu.find("a"),
    // Kotwice do pozycji menu
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

// Animacje po kliknięciu w pozycję menu
menuItems.click(function(e){
  var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
  $('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, 1000);
  e.preventDefault();
});

// Po przewinięciu
$(window).scroll(function(){
   // Pobierz pozycje kontenera 
   var fromTop = $(this).scrollTop()+topMenuHeight;
   
   // Pobierz identyfikator aktualnej pozycji przewinięcia
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Pobierz identyfikator aktualnego elementu
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   
   if (lastId !== id) {
       lastId = id;
       // Ustaw lub usun "active" - odpowiada za podświetlenie pozycji w menu
       menuItems
         .parent().removeClass("active")
         .end().filter("[href=#"+id+"]").parent().addClass("active");
   }                   
});

 

Comments

Możesz dać caly kod gdzieś na stronie np. https://jsfiddle.net/ albo w paczce bo takie analizowanie w okienkach to strasznie pracochłonna sprawa i nie wiem czy ktoś na to pójdzie...

---

daj jakiś ludzki temat.

Answer 1

Strona typu onepage? W bootstrapie masz od tego opcje: http://getbootstrap.com/javascript/#scrollspy

Comments

Faktycznie, pięknie działa. Dzięki ! :)