鏈接在滾動時更改顏色

Question

我試圖找出當用戶滾動頁面時鏈接將如何改變顏色。 此頁面上有一個示例。 在右邊是下面鏈接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');
});

我在這里嘗試一個示例，但我不理解。

我將它與下一個代碼一起使用，但是我真的很想滾動

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

Answer 1

首先，請勿使用iframe，將html從side1重定向到原始頁面，然后將它們包裝起來，以備日后放置時使用。

您正在尋找的被稱為錨定，錨定就像是網頁的小gps系統。 在javascript中，您可以通過添加特殊的類“ active”（例如，使用樣式）來為這些錨標記上色：

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

現在，在JS（帶有JQuery）中，將active添加到所單擊的

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

這就是您所需要的。

鏈接在滾動時更改顏色

問題描述

1 個解決方案

解決方案1
0 2017-02-21 13:19:53

鏈接在滾動時更改顏色

問題描述

1 個解決方案

解決方案1 0 2017-02-21 13:19:53

解決方案1
0 2017-02-21 13:19:53