Question

我试图找出当用户滚动页面时链接如何改变颜色。一个例子是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>

Answer 1

首先不要使用iframe，将h1从side1迭代到原始页面并将它们包装起来以防以后要放置它们。

您正在寻找的是锚定，其中锚点就像网页的小gps系统。在javascript中，您可以通过添加一个特殊类＆＃34; active＆＃34;来为这些锚定颜色。例如，使用样式：

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

现在在JS（使用JQuery）中添加活动到被点击的

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

这就是你所需要的一切。

滚动时链接更改颜色

1 个答案: