我在滚动页面时阻止我的标题变透明时遇到了很多麻烦。我不确定是什么导致它（我使用了模板），但你可以在这里查看代码：
https://github.com/IF-Apps/IF-Charts
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>IF-Charts - Charts and Plates for Flight Simulation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/queries.css">
<link rel="stylesheet" href="css/etline-font.css">
<link rel="stylesheet" href="bower_components/animate.css/animate.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</head>
<body id="top">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<section class="hero">
<section class="navigation">
<header>
<div class="header-content">
<div class="header-nav">
<nav>
<ul class="primary-nav">
<li><a href="index.html">Home</a></li>
<li><a href="ifcharts.html">IF-Charts</a></li>
<li><a href="learnmore.html">Learn More</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
<div class="navicon">
<a class="nav-toggle" href="#"><span></span></a>
</div>
</div>
</header>
</section>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="hero-content text-center">
<h1>IF-Charts</h1>
<p class="intro">Plan your flight with plates.</p>
</div>
</div>
</div>
</div>
</section>
<section class="features section-padding" id="features">
<div class="container">
<div class="row">
<div class="feature-list">
<h3>Plan your flight</h3>
<p>Select the airport you would like charts for. Want to learn how to use charts? Check out the <a href="tutorial.html">tutorial</a>. PLEASE NOTE THAT THESE CHARTS ARE NOT FOR OPERATIONAL USE!</p>
<br>
<div class="fb-like" data-href="https://www.facebook.com/IF-Charts-1233474450057832/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div> <br> <br>
<br>
<div align="center">
<h2>Please choose:</h2>
<br />
<span>
<a href="charts_depart.html"><img src="img/takeoff-the-plane.png" alt="Departures" style="width:80px;height:80px;border:0;"></a>
<a href="charts_arrive.html"><img src="img/plane-landing.png" alt="Arrivals" style="width:80px;height:80px;border:0;"></a>
</span>
<p>View all charts <a href="ifcharts-old.html">here</a>.
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="footer-links">
<a href="https://github.com/GiacomoLaw/IF-Charts/blob/master/LICENSE">Licence</a> | <p><p>By Giacomo Lawrance.</p>
</div>
</div>
</div>
</div>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="bower_components/retina.js/dist/retina.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="bower_components/classie/classie.js"></script>
<script src="bower_components/jquery-waypoints/lib/jquery.waypoints.min.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>
我认为它与CSS有关，但我不确定。
问题是，当在顶部时，无法看到菜单项。我只想让标题保持黑色。你可以在这里看到问题：
答案 0 :(得分：1)
在你的scripts.js文件中，有一个函数可以在滚动时添加或删除多个内容。
/***************** Header BG Scroll ******************/
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 20) {
$('section.navigation').addClass('fixed');
$('header').css({
"border-bottom": "none",
"padding": "35px 0"
});
$('header .member-actions').css({
"top": "26px",
});
$('header .navicon').css({
"top": "34px",
});
} else {
$('section.navigation').removeClass('fixed');
$('header').css({
"border-bottom": "solid 1px rgba(255, 255, 255, 0.2)",
"padding": "50px 0"
});
$('header .member-actions').css({
"top": "41px",
});
$('header .navicon').css({
"top": "48px",
});
}
});
});
完全删除此功能。
更改
<section class="navigation">
要
<section class="navigation fixed">
如果您想使用其他属性，请将它们添加到CSS文件中的以下类中。
header {
border-bottom: none;
padding: 35px 0;
}
header .member-actions {
top: 26px;
}
header .navicon {
top: 34px;
}
答案 1 :(得分：0)
您需要为导航添加背景颜色。
.navigation {
background: #232731;
}