当用户向下滚动并且 header-box-2 变得可见时，我想让我的标题文本具有下划线动画。我应该怎么做？使用 J-Query？
一个例子是我向下滚动到我的第一部分，一旦出现 header-box-2，我希望它在 header-box-2 的文本下划线。
我想要使用的 header 是 header-box-2 的 header 。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="swdd.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<a href="#" id="open">menu</a>
<nav class="nav-fixed-clear">
<ul>
<li><a href="#">home</a></li>
<li><a href="#about">about</a></li>
<li><a href="#services">services</a></li>
<li><a href="#portfolio">portfolio</a></li>
<li><a href="#contactme">contact us</a></li>
</ul>
</nav>
<script>
$("#open").click(function() {
$(".nav-fixed-clear").slideToggle(300, function() {
$(this).toggleClass("nav-expanded").css("display", "");
});
});
</script>
<div class="home-box">
<div class="welcome-box">
<div class="header-box-1">
<h1>hello there.</h1>
</div>
<div class="para-box-1">
<p>my name is syd.</p>
</div>
</div>
</div>
<a href="#" name="about"></a>
<div class="section-box-1">
<div class="content-box-1">
<div class="header-box-2">
<h2>Who am I?</h2>
</div>
<div class="para-box-1">
<p>My name is Syd. I am web designer and developer. </p>
</div>
</div>
</div>
<a href="#" name="services"></a>
<div class="section-box-2">
<div class="content-box-1">
<div class="header-box-2">
<h2>My services: </h2>
</div>
<div class="para-box-1">
<p>I specialize single-page web design. What makes me unique from many web designers today is that I code my websites from scratch. Because of this I can create a truly original design for you. </p>
</div>
</div>
</div>
</body>
</html>
body {margin: 0; padding: 0;}
/*********************/
/* */
/* nav-fixed-clear */
/* */
/*********************/
/* This navigation bar is best for websites with light backgrounds. */
.nav-fixed-clear {
position: fixed;
width: 100%;
border-bottom: 1px solid transparent;
transition: border ease-in-out 1s;
z-index: 3;
}
.nav-fixed-clear:hover {
border-color: #000000;
}
.nav-fixed-clear ul {
list-style: none;
margin: 0 auto;
width: 70%;
}
.nav-fixed-clear li {
display: block;
}
.nav-fixed-clear a {
color: #000000;
float: left;
margin: 1% 6%;
text-decoration: none;
font-family: 'Roboto', sans-serif;
border-bottom: 1px solid transparent;
transition: border ease-in-out .5s;
font-size: 1em;
}
.nav-fixed-clear a:hover {
border-color: red;
}
#open {
display: none;
font-family: 'Roboto', sans-serif;
color: #000000;
text-decoration: none;
margin: 0;
padding: 2%;
border-bottom: 3px solid black;
}
@media only screen and (max-width: 990px) {
.nav-fixed-clear {
border-bottom: none;
transition: none;
display: none;
position: static;
}
.nav-fixed-clear ul {
padding: 0;
margin: 0;
width: 100%
}
.nav-fixed-clear li {
padding: 2%;
border-bottom: 1px solid gray;
width: 100%;
}
.nav-fixed-clear a {
float: none;
margin: 0;
}
#open {
display: block;
}
.nav-expanded {
display: block;
}
}
.home-box {
width: 100%;
height: 100vh;
position: absolute;
}
.welcome-box {
width: 65%;
margin: 0 auto;
margin-top: 20%;
font-family: 'Roboto', sans-serif;
}
.header-box-1 {
font-size: 2em;
color: #333333;
}
.para-box-1 {
font-size: 1.2em;
color: #4d4d4d;
text-transform: lowercase;
}
.section-box-1 {
top: 100%;
height: 100vh;
width: 100%;
position: absolute;
}
.content-box-1 {
font-family: 'Roboto', sans-serif;
width: 65%;
margin: 0 auto;
margin-top: 5%;
}
.header-box-2 {
font-size: 1.5em;
color: #333333;
text-transform: lowercase;
}
.section-box-2 {
top: 200%;
height: 100vh;
width: 100%;
position: absolute;
}最佳答案
点击[https://jsfiddle.net/up4nu/]它会对你有所帮助
关于jquery - 当文本在网页上可见时如何使文本加下划线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34689727/