Question

我将标题设置为透明，因此它将在图片上方显示。滚动一次后，我希望标题背景不再透明。作为一个附带问题，我有＆＃34;关于＆＃34;链接到页面上的另一个元素（所以当我单击它时，它将转到该元素）。我该如何平滑这个链接？

HTML

<!doctype html>
<html>
<head>
    <link rel="shortcut icon" href="css/favicon.png" type="image/x-icon">
    <meta charset="utf-8">
    <link href='http://fonts.googleapis.com/css?family=Lato:400,100,300' rel='stylesheet' type='text/css' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
    <title>Home of the Brogrammers.</title>
    <link rel="stylesheet" href ="css/style.css">

    <meta name="description" content="Build N Code">
    <meta name="keywords" content="Build N Code, coding, awesomness, da shit, SWAG">
    <meta name="author" content="Gajan Nagaraj">
</head>
<body>
<header class="nav">
<div id="logo">
<h1 onclick="document.location='index.html'" style="cursor:pointer;">
Build n Code 
</h1>
<p>Home of the Brogrammers.</p>
</div>
    <nav>
        <ul>
        <li>
                <a href="index.html" title="Home" id="static">
                            Home
                </a>
            </li>
            <li>
                <a href="#about" title="Find out more about Build n Code" class="active">
                            About
                </a>
            </li>
            <li>
                <a href="product.html" title="Need Help?" class="active">
                            Contact Us  
                </a>
            </li>
            </ul>
    </nav>

</header>

<img src="images/finalbg.png" id="mainpc"></img>
<div id="about">
<h1>Who Are We?</h1>
<iframe width="640" height="360" src="//www.youtube.com/embed/RvaFLac_XU8" frameborder="0"                   allowfullscreen></iframe>
<p>We are the Brogrammers, and are dedicated to teaching you how to code. We also provide a Minecraft forum, because who wouldn't? To learn more got to our About page.</p>
<div id="aboutbottun" style="cursor:pointer;" onclick="document.location='about.html'">
              About Us
</div>
</div>

CSS：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
    width: 100%;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.nav{
    background-color: transparent;
    transition: .5s;
    width: 100%;
    display: inline-block;
    position: fixed;
    z-index: 999;
}
.nav.past-main {
    background-color:#ecf0f1;
}
header #logo {
    float: left;
}

header nav {
    float: right;
    padding-top: 40px;
    padding-right:15px;
    font-size:17px;
    font-family: "Open Sans", "Sans-serif";
    font-weight: 300;
}
header nav ul {
    margin: 0;
    padding-bottom:0px;
    float: right;
}
header nav li {
    display: inline;
}
header nav li + li {
    padding-left: 15px;
}
.active{
    color: #3498db;
    text-decoration: none;
}
.active:hover,
.active:focus {
    font-weight: 400;
    color: #2980b9;
    transition:.2s;

}
#static{
    color: #000;
    text-decoration: none;
}
#static{
    color: #000;
}
header #logo {
    float: left;
    color: #3498db;
    padding-top: 17px;  
    font-size: 35px;
    font-style: 700;
    padding-left: 15px;
    padding-bottom: 17px;
    display:inline-block;
    font-family: "Open Sans", "Sans-serif";
    font-weight:300;
    display: inline-block;
}
header #logo p{
    font-size: 20px;
}
#about{
    padding: 15px 0px;
    background-color: #fff;
    color: #3498db;
    font-family: 'Open Sans', 'Sans-serif';
    font-weight: 300;
}
#about h1{
    text-align: center;
    font-size: 50px;
    padding-bottom: 15px;
}
#about p{
    font-size: 35px;
    font-family: 'Lato','Sans-serif';
    font-weight: 300;
    color: #000;
    margin-right: 700px;
    margin-left: 10px;
    line-height: 50px;
    padding-bottom: 35px;
}
#about iframe{
    float: right;
    padding-bottom: 10px;
}
#aboutbottun{
    font-size: 17px;
    font-weight: 300;
    line-height: 1.4;
    border-radius: 4px;
    padding:10px 70px;
    border: medium none;
    background-color: #fff;
    color: ##3498db;
    border: 2px solid #3498db;
    width:150px;
    margin-left:auto;
    margin-right:auto;
    transition:.5s;
    text-align: center;
    margin-right: 1000px;
}
#aboutbottun:hover{
    background:#3498db;
    color:#fff;
}
#mainpc{
    width: 100%;
}

Answer 1

如果要在滚动大于10时更改条形颜色，请在结束体标记之前添加此代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript"> 
$(window).scroll(function(){
     var top=$(window).scrollTop()
     console.log(top)
     /*put your color in background color */
     if(top>10){ $('.nav').css('background-color','red'); }
     else{ $('.nav').css('background-color','Transparent'); }

      }) 
</script>

滚动后如何更改标题的颜色？

1 个答案: