s-zigan.de

DIGITALE MEDIEN UND MEHR

s-zigan.de, Webdesign

One-Page-Site – Navigation

back ⇒

Demo-Datei

Der jeweils aktuelle Link in der Navigation wird hervorgehoben. Dies geschieht beim klicken auf den Navigationslink, als auch beim scrollen durch die Inhaltsbereiche.

Das Script übergibt dem jeweiligen Navi-Link die Klasse ‚.akt‘.
Die Klasse muss lediglich per CSS mit Eigenschaften ausgestattet werde.
Gebräuchlich werden die :hover – Eigenschaften dafür genutzt.
Beispiel:

...
#topnav a {
	text-decoration: none;
	color: #aaa;
	...
}
#topnav a:hover,
#topnav a.akt {
	color: #000;
	background: rgba(255,255,255,0.9);
}
...

Vor dem Script muss die Bibliothek jQuery geladen werden, entweder von der Seite jQuery oder Google, oder besser downloaden und dann aus dem Projektordner laden.

Das Script:
Im oberen Bereich werden die id’s der OnePage-Seitenbereiche in ein Array eingetragen.
Soweit es eine fixierte Navi am oberen Rand der Seite gibt, wird die Höhe dieser eingetragen, gibt es dies nicht, wird der Wert ‚0‘ übergeben.
Sollte der erste Link nicht ganz oben sein (header über den Article) trägt man bei ersterLinkBeiNull = ‚false‘ ein sonst ‚true‘.
Die letzte Anweisung bedeutet dem Element unter dem letzten Article (wird in aller Regel der footer sein) die id ‚ende‘ zu verpassen.

Danach sollte alles fein funktionieren.
Lest gern die kleinen Kommentare am Code um mehr zu verstehen.

<script>
$(document).ready(function(){
  /////////////////////////////////////////////////////
  // aktuellen Link automatisch .akt zuweisen /////////
  /////////////////////////////////////////////////////
  // alle id in Reihenfolge in das Array! -----------//
  var navlink = new Array(                           //
	  '#eins',                                       //
	  '#zwei',                                       //
	  '#drei',                                       //
	  '#vier'                                        //
  );                                                 //
  //Höhe der fixierten Navi eintragen (nicht fix = 0)// 
  var navHeigth = 40;                                //
  var ersterLinkBeiNull = false; //true,false;/////////
  //gib dem footer die id="ende" !!!!!!!!!!!!!!!!!!!!//
  /////////////////////////////////////////////////////

  //ab hier nix mehr ändern
  navHeigth = navHeigth +2;
  if(ersterLinkBeiNull == true)$('a[href="'+navlink[0]+'"]').addClass('akt');

//Wenn gescrollt wird ...     
$(window).scroll(function(){

  //aktuelle y-Position ////////////////////////////////
  var topnow = $(window).scrollTop();

  //function für die einzelnen Article starten ///////
  var x;
  for(x = 0 ; x < navlink.length ; x++){
	 if( x < (navlink.length-1)){
		var anf = $(navlink[x]).offset().top - navHeigth;
		var end = $(navlink[(x+1)]).offset().top - navHeigth;
		AktLink(navlink[x],anf,end,topnow);
	 }
	 else {
		var anf = $(navlink[x]).offset().top - navHeigth;
		var end = $('#ende').offset().top;
		AktLink(navlink[x],anf,end,topnow);
	 }
   }
});  
//Klasse akt zuweisen (function) -> per css .akt formatieren ///
function AktLink(link,idStart,idEnd,pos){
  if(pos >= idStart && pos < idEnd){
	$('nav a[href="'+link+'"]').addClass('akt');
  }
  else {
	$('nav a[href="'+link+'"]').removeClass('akt');
  }
}  

  /////////////////////////////////////////////////////
  // Zum aktuellen Link sliden  ///////////////////////
  /////////////////////////////////////////////////////
  $('nav a').click(function(){
	var link = $(this).attr('href'); 
	$('html,body').animate({scrollTop:($(link).offset().top - navHeigth)},1000);
	return false;
  });

});
</script>

Am Ende befindet sich ein einfaches Script mit dessen Hilfe nach Klick-Navigation zu dem entsprechenden Artikel geslidet wird.

back ⇒