0
我想讓我的標題文本有一個下劃線動畫，當用戶向下滾動並且標題框2變爲可見時。我應該怎麼做？使用J-Query？如何在網頁上顯示文字時將文字加下劃線？
一個例子是我向下滾動到我的第一部分，一旦標題框2我希望它下劃線標題框2的文本。
我想要做的這個標題是header-box-2。
<!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;}
/*********************/
/* \t \t \t \t \t */
/* \t nav-fixed-clear */
/* \t \t \t \t */
/*********************/
/* This navigation bar is best for websites with light backgrounds. */
.nav-fixed-clear {
\t position: fixed;
\t width: 100%;
\t border-bottom: 1px solid transparent;
\t transition: border ease-in-out 1s;
\t z-index: 3;
}
.nav-fixed-clear:hover {
\t border-color: #000000;
}
.nav-fixed-clear ul {
\t list-style: none;
\t margin: 0 auto;
\t width: 70%;
}
.nav-fixed-clear li {
\t display: block;
}
.nav-fixed-clear a {
\t color: #000000;
\t float: left;
\t margin: 1% 6%;
\t text-decoration: none;
\t font-family: 'Roboto', sans-serif;
border-bottom: 1px solid transparent;
\t transition: border ease-in-out .5s;
\t font-size: 1em;
}
.nav-fixed-clear a:hover {
\t border-color: red;
\t
}
#open {
\t display: none;
\t font-family: 'Roboto', sans-serif;
\t color: #000000;
\t text-decoration: none;
\t margin: 0;
\t padding: 2%;
\t
\t border-bottom: 3px solid black;
}
@media only screen and (max-width: 990px) {
\t .nav-fixed-clear {
\t \t border-bottom: none;
\t \t transition: none;
\t \t display: none;
\t \t position: static;
\t }
\t .nav-fixed-clear ul {
\t \t padding: 0;
\t \t margin: 0;
\t \t width: 100%
\t }
\t
\t .nav-fixed-clear li {
\t \t padding: 2%;
\t \t border-bottom: 1px solid gray;
\t \t width: 100%;
\t }
\t
\t .nav-fixed-clear a {
\t \t float: none;
\t \t margin: 0;
\t
\t }
\t
\t #open {
\t \t display: block;
\t \t
\t }
\t
\t
\t .nav-expanded {
\t \t display: block;
\t \t
\t }
}
.home-box {
\t width: 100%;
\t height: 100vh;
\t position: absolute;
}
.welcome-box {
\t width: 65%;
\t margin: 0 auto;
\t margin-top: 20%;
\t font-family: 'Roboto', sans-serif;
}
.header-box-1 {
\t font-size: 2em;
\t color: #333333;
}
.para-box-1 {
\t font-size: 1.2em;
\t color: #4d4d4d;
\t text-transform: lowercase;
}
.section-box-1 {
\t top: 100%;
\t height: 100vh;
\t width: 100%;
\t position: absolute;
}
.content-box-1 {
\t font-family: 'Roboto', sans-serif;
\t width: 65%;
\t margin: 0 auto;
\t margin-top: 5%;
}
.header-box-2 {
\t font-size: 1.5em;
\t color: #333333;
\t text-transform: lowercase;
}
.section-box-2 {
\t top: 200%;
\t height: 100vh;
\t width: 100%;
\t position: absolute;
}
這是使用jQuery？ – sydluce