链接在滚动时更改颜色 [英] link change color on scrolling

查看：24
本文介绍了链接在滚动时更改颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图找出当用户滚动页面时链接将如何改变颜色.此页面上的示例.右侧是in this rticle下方的链接.

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.

在我的示例中，我希望 titlex 改变颜色，具体取决于用户看到/滚动的内容.

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>

<iframe class="side1" src="side1.html" frameborder="0"></iframe><!-- <iframe class="side2" src="side2.html" frameborder="0"></iframe>-->

</html>

<块引用>

side1.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>

推荐答案

首先不要使用 iframe，将 side1 的 html 迭代到原始页面，然后将它们包装在 a 中，以备以后定位它们.

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.

>

您正在寻找的称为锚定，其中锚定就像网页的小型 GPS 系统.在javascript中，您可以通过添加一个特殊的类active"来为这些锚点着色，例如使用样式:

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

现在在 JS(使用 JQuery)中添加 active 到被点击的

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

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

这就是你所需要的.

这篇关于链接在滚动时更改颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆