スクロールでリンクの色が変化する

ユーザーがページをスクロールしたときにリンクの色がどのように変わるかを調べようとしています。例はthis pageです。右側にはin this rticleのリンクがあります。スクロールでリンクの色が変化する

私の例では、ユーザーが表示/表示する内容に応じて、titlexに色を変更したいと考えています。

page.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'); 
});

私はexample hereをしようとしていますが、私はそれを理解していません。

は、私はそれが次のコードで作業を行って、しかし、私は本当に、すべての

<!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>

出典

2017-02-21 andrej

リンク変更の色は？あなたは（例えば）[scrollspy]（http://v4-alpha.getbootstrap.com/components/scrollspy/）を意味しますか？ –

タイトル1、タイトル2 ...はリンクです – andrej

まず、アイフレームを使用していないスクロールに持ってあなたの元のページにSIDE1からHTMLをitegrateとでそれらをラップしたいと思います後でそれらを配置したい場合に備えてください。

あなたが探しているものはアンカーと呼ばれ、アンカーはウェブページの小さなGPSシステムのようなものです。 JavaScriptでは、あなたは、スタイリングと例については、「アクティブ」を特別なクラスを追加することにより、これらのアンカーを色付けすることができます（jQueryを使って）JSで今

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

クリックされたことに、アクティブ追加

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

そして、それはですあなたが必要とするものすべて。

出典

2017-02-21 13:19:53

ソースファイルにアクセスできますか？ –

素晴らしい。私の答えを最高に選んでください。ありがとう、幸運 –

私はまだスクロールの問題に苦しんでいて、適切なリンク – andrej

スクロールでリンクの色が変化する

答えて

関連する問題