• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Prośba o pomoc z JS

VPS Starter Arubacloud
0 głosów
258 wizyt
pytanie zadane 12 lutego 2017 w JavaScript przez Cinekkkk Nowicjusz (220 p.)

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

 

komentarz 12 lutego 2017 przez hoktaur Pasjonat (22,250 p.)
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...
komentarz 13 lutego 2017 przez Ehlert Ekspert (212,630 p.)
daj jakiś ludzki temat.

1 odpowiedź

0 głosów
odpowiedź 13 lutego 2017 przez chris Gaduła (3,680 p.)
Strona typu onepage? W bootstrapie masz od tego opcje: http://getbootstrap.com/javascript/#scrollspy
komentarz 13 lutego 2017 przez Cinekkkk Nowicjusz (220 p.)
Faktycznie, pięknie działa. Dzięki ! :)

Podobne pytania

0 głosów
1 odpowiedź 215 wizyt
pytanie zadane 19 października 2018 w JavaScript przez Biay Początkujący (420 p.)
0 głosów
2 odpowiedzi 121 wizyt
pytanie zadane 8 lutego 2016 w JavaScript przez Else Stary wyjadacz (12,260 p.)
0 głosów
1 odpowiedź 201 wizyt
pytanie zadane 21 czerwca 2017 w JavaScript przez Emil Szerafin Nowicjusz (170 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...