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");
}
});