[英]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 this rticle
。
In my example I would like the titlex
to change colors, depending on what the user see/scroll. 在我的示例中,我希望
titlex
更改颜色,具体取决于用户看到/滚动的内容。
page.html :
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> 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> 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> 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> 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 :
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 :
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>
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. 首先,请勿使用iframe,将html从side1重定向到原始页面,然后将它们包装起来,以备日后放置时使用。
What you are looking for is called anchoring, where anchors are like little gps systems for the webpage. 您正在寻找的被称为锚定,锚定就像是网页的小gps系统。 In javascript you can color these anchors by adding a special class "active" for example with styling:
在javascript中,您可以通过添加特殊的类“ active”(例如,使用样式)来为这些锚标记上色:
.active {
border-left: solid 3px #0072c6;
color: #0072c6;
}
Now in JS (with JQuery) add active to the that is clicked 现在,在JS(带有JQuery)中,将active添加到所单击的
$('a.menu').on('click', function() {
$('.active').removeClass('.active');
$('this').addClass('.active');
});
And that's all you need. 这就是您所需要的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.