链接在滚动时更改颜色

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