link change color on scrolling

问题

I am trying to find out how a link will change color when a user scroll a page. An example is on this page. On the right are links beneath in this rticle.

In my example I would like the titlex to change colors, depending on what the user see/scroll.

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

I am trying an example here, but I do not understand it.

I go it working with next code, but i would really like to have on scroll

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

回答1:

First of all do not use iframes, itegrate the html from side1 to your original page and wrap them in a in case you want to position them later.

What you are looking for is called anchoring, where anchors are like little gps systems for the webpage. In javascript you can color these anchors by adding a special class "active" for example with styling:

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

Now in JS (with JQuery) add active to the that is clicked

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

And that's all you need.

来源：https://stackoverflow.com/questions/42367858/link-change-color-on-scrolling

标签

html

css