Ergebnis 1 bis 3 von 3

Thema: mitlaufende Navigation, aktive Links unterstrichen wenn ID erreicht wird

  1. #1
    Neuer Benutzer
    Registriert seit
    25.03.2014
    Beiträge
    1

    Frage mitlaufende Navigation, aktive Links unterstrichen wenn ID erreicht wird

    Hallo,

    ich hoffe ihr könnt mir vllt. weiter helfen.
    Ich möchte gern, das meine Navigation mitläuft sobald der Benutzer runterscrollt. Sobald eine Sektion (ID) erreicht wird, soll der jeweilige link unterstrichen werden, WICHTIG: jeder link soll eine andere Farbe haben. Schön wäre auch ein HOver effekt.

    HTML-Code:
    <body id="top">
    
    <div id="container">
      <div id="header">
        <div id="nav1">
          <ul>
            <li id="portbutton"><a href="#portfolio">PORTFOLIO</a></li>
            <li id="infobutton"><a href="#info">INFO</a></li>
            <li id="kontaktbutton"><a href="#kontakt">KONTAKT</a></li>
          </ul>
        </div>
      </div>
      <div id="content">
      </div>
    </div>
    
    <div id="portfolio">
    	<div id="content-port">
    	</div>
    </div>
    
    <div id="info">
    	<div id="content-info">
      	</div>    	
    </div>
    
    <div id="kontakt">
    	<div id="content-kontakt">
      	</div>    	
    </div>
    </body>
    Code:
    $(window).scroll(function (event){
    		if ($(this).scrollTop() > 50) {
            $('#nav1').addClass('fixed');
           } else {
             $('#nav1').removeClass('fixed');
           }
             
    		 
             var Position = $('#nav1').offset().top - t,
                 onePosition = $("#portfolio").offset().top - t,
                 twoPosition = $("#info").offset().top - t,
                 threePosition = $("#kontakt").offset().top - t;
    
             if(Position  > threePosition){
                  $('#infobutton').css({'border-bottom' : '3px solid #FF0079'});
             }else if(Position > twoPosition){
                  $('#kontaktbutton').css({'border-bottom' : '3px solid #0FF'});
             }else if(Position  > onePosition){
                 $('#portbutton').css({'border-bottom' : '3px solid #00FFFF'});
             }
         });
    Code:
    #nav1.fixed {
    	position: fixed;
    	top: 0;
    }

    Was mache ich falsch?

  2. #2
    Erfahrener Benutzer
    Registriert seit
    06.06.2010
    Beiträge
    880
    Ich hab` jetzt nur mal so drüber geschaut und dabei festgestellt, das die var t in Deinem Script gar nicht definiert ist - vielleicht liegt`s daran?...
    Neu hier? Bitte beachte folgende Punkte:
    1. Vor dem Erstellen eines neuen Beitrags bitte zuerst diesen Beitrag lesen!
    2. Firebug (für Firefox) bzw. Firebug Lite (für Safari & Chrome) ist ein mächtiges Debugger-Tool!
    3. console.log() ist ebenfalls Dein Freund!
    4. Auf jsFiddle.net kannst Du Deinen Code anschaulich präsentieren - das hilft oft, Dein Problem zu verstehen!
    5. Bitte schreibt mir keine PM zu Eurem Problem - ich übersehe die Messages ständig...
    6. Klick, Klick, Klick, Klick

  3. #3
    Neuer Benutzer
    Registriert seit
    24.08.2019
    Ort
    Canada
    Beiträge
    6

    mitlaufende Navigation aktive Links unterstrichen wenn ID erreicht wird

    Ich habe hier auch ein USB Stick der nicht erkannt wird wenn er beim Hochfahren schon steckt.
    Alle anderen werden erkannt in der konstellation.
    Stecke ich den besagten nach dem Hochfahren ein wird er sofort erkannt.
    Ist aber nur der eine Stick ,ext4 formatiert wie die anderen.

    djeli

Stichworte

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •