Link ändern Farbe beim Scrollen

Ich versuche herauszufinden, wie ein Link die Farbe ändern wird, wenn ein Benutzer eine Seite blättern. Ein Beispiel ist auf this page. Auf der rechten Seite sind Links unter in this rticle.Link ändern Farbe beim Scrollen

In meinem Beispiel möchte ich die titlex Farben ändern, je nachdem, was der Benutzer sehen/scrollen.

seite.html:

<!DOCTYPE html> 
<html> 
<head> 
    <title>page</title> 
    <style type="text/css"> 
     <!-- 
     body.container { 
      width: 100%; 
     } 
     .maintext { 
      min-height: 1080px; 
      width: calc(100% - 210px); 
      float: right; 
      background: #FFFCB5; 
     } 
     iframe.side1, 
     iframe.side2 { 
      position: fixed; 
      left: 0; 
      width: 200px; 
     } 
     iframe.side1 { 
      top: 0; 
      height: 300px; 
      background: #D5F6E4; 
     } 
     iframe.side2 { 
      top: 300px; 
      height: 100px; 
      background: #D5E2F6; 
     } 
     --> 
    </style> 
    <script src="style_switcher.js"></script> 
</head> 
<body> 
<div class="container"> 
    <div class="maintext"> 
     <a name="dic1"></a><h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dict1</h3><br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
     <a name="dic2"></a><h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dict2</h3><br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
     <a name="dic3"></a><h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dict3</h3><br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
     <a name="dic4"></a><h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dict4</h3><br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
      ddd<br/> 
    </div> 
    <iframe class="side1" src="side1.html" frameborder="0"></iframe> 
<!-- <iframe class="side2" src="side2.html" frameborder="0"></iframe> --> 
</div> 
</body> 
</html>

side1.html:

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     <!-- 
     a { DISPLAY: block; } 
     .active { 
      border-left: solid 3px #0072c6; 
      color: #0072c6; 
     } 
     --> 
    </style> 
    <script src="style_switcher.js"></script> 
</head> 
<body> 
    <a class="menu" target="_parent" href="page.html#dic1" title="title"  > title1</a> 
    <a class="menu" target="_parent" href="page.html#dic2" title="title"  > title2</a> 
    <a class="menu" target="_parent" href="page.html#dic3" title="title"  > title3</a> 
    <a class="menu" target="_parent" href="page.html#dic4" title="title"  > title4</a> 
</body> 
</html>

style_switcher.js:

$('a.menu').on('click', function() { 
    $('.active').removeClass('.active'); 
    $('this').addClass('.active'); 
});

Ich bin ein example here versucht, aber ich verstehe es nicht.

Ich gehe es mit dem nächsten Code zu arbeiten, aber ich würde wirklich auf Blättern haben wie

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
    <!-- 
     a.menu { 
      DISPLAY: block; 
      border-left: solid 3px #D41B1B; 
      color: #D41B1B; 
     } 
     a.active { 
      border-left: solid 3px #0072c6; 
      color: #0072c6; 
     } 
    --> 
    </style> 
    <script src="jquery-3.1.1.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     $(".menu").mouseleave(function(){ 
      $(this).css("background-color", "lightblue"); 
     }); 
    }); 
    </script> 
</head> 
<body> 

<p id="p1">a paragraph.</p> 
<a class="menu" target="_parent" href="page.html#dic1" title="title"  > title1</a> 

</body> 
</html>

Quelle

2017-02-21 andrej

Linkfarbe ändern? Meinst du (zum Beispiel) ein [scrollspy] (http://v4-alpha.getbootstrap.com/components/scrollspy/)? –

title1, title2 ... sind Links – andrej

Zu allererst hat leider keine Frames, itegrate die HTML von side1 auf der Originalseite und wickeln Sie sie in einem falls Sie sie später positionieren möchten.

Was Sie suchen, heißt Verankerung, wo Anker wie kleine GPS-Systeme für die Webseite sind. In Javascript können Sie diese Anker durch Hinzufügen einer Sonderklasse „aktiv“ zum Beispiel mit Styling Farbe:

.active { 
    border-left: solid 3px #0072c6; 
    color: #0072c6; 
}

Jetzt in JS (mit JQuery) hinzufügen, aktiv zu dem, dass

$('a.menu').on('click', function() { 
    $('.active').removeClass('.active'); 
    $('this').addClass('.active'); 
});

geklickt wird Und das ist alles was du brauchst.

Quelle

2017-02-21 13:19:53

können Sie Zugriff auf Quelldateien geben? –

genial. Können Sie bitte meine Antwort als die beste wählen? Danke und viel Glück –

Ich kämpfe immer noch mit dem Scroll-Problem und als Hintergrund den entsprechenden Link setzen – andrej

Link ändern Farbe beim Scrollen

Antwort

Verwandte Themen