我正在为朋友制作一个网站，我想让导航栏变得粘稠。这是一个例子：http://www.w3schools.com/html/default.asp。我想要一个图片，其中标题在示例中。
以下是我已经制作的代码：
<html>
<head class="masthead">
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="stylehom.css">
<link href="https://dub110.afx.ms/att/GetInline.aspx?messageid=1f91e2e4-f236-11e4-9965-002264c20aa4&attindex=0&cp=-1&attdepth=0&imgsrc=cid%3apart1.04010900.00040603%40btinternet.com&cid=07bd617fb040a20e&hm__login=edwinshepherd1&hm__domain=live.co.uk&ip=10.211.20.8&d=d97&mf=0&hm__ts=Mon%2c%2004%20May%202015%2016%3a39%3a02%20GMT&st=edwinshepherd1%25live.co.uk%407&hm__ha=01_9ec1f64927212e04419eae777113f0da6f91696bf6888f10c6ec81157beef631&oneredir=1" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
.jumbotron {
background-image:url('//c1.staticflickr.com/9/8723/16322346204_6a1a86440a_c.jpg');
height: 500px;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.jumbotron .container {
position: relative;
top:125px;
left:25px;
}
.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotron p {
font-size: 20px;
color: #fff;
}
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
.learn-more {
background-color: #ffffff;
}
.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}
.learn-more a {
color: #00b0ff;
}
.neighborhood-guides {
background-color: #efefef;
border-bottom: 1px solid#dbdbdb
}
.neighborhood-guides h2 {
color: #393c3d;
font-size: 24px;
}
.neighborhood-guides p {
font-size: 15px;
margin-bottom: 13px;
}
function resizeIframe(iframeID)
{
var iframe = window.parent.document.getElementById(iframeID);
var container = document.getElementById('content');
iframe.style.height = container.offsetHeight + 'px';
}
.blog ,iframe { overflow:hidden; }
</style>
<style type="text/css"></style><style type="text/css"></style><style type="text/css"></style>
<title>The Unthinkable</title>
</head>
<body>
<!---<nav class="navbar navbar-default navbar-fixed-top">
<div class="nav">
<div class="container">
<ul class="pull-left">
<li><a href="#"><img src="//c1.staticflickr.com/9/8612/16254026843_667c68f054_n.jpg" alt="LOGO" style="width:120px;height:30px;border:0"></a></li>
<li><a href="browse.html">About</a></li>
</ul>
<ul class="pull-right">
<a href="#blog">Blog</a>
<li><a href="http://theunthinkable.tk/alpha/music.html">Music</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</div>
</div>
</nav>---!>
<div class="jumbotron">
<div class="container">
<h1>My name is Joe. I make music.</h1>
<p>This is where it begins.</p>
<a href="#blog">Learn More</a>
</div>
</div>
<nav class="navbar navbar-default">
<div class="nav">
<div class="container">
<ul class="pull-left">
<li><a href="#"><img src="//c1.staticflickr.com/9/8612/16254026843_667c68f054_n.jpg" alt="LOGO" style="width:120px;height:30px;border:0"></a></li>
<li><a href="browse.html">About</a></li>
</ul>
<ul class="pull-right">
<a href="#blog">Blog</a>
<li><a href="http://theunthinkable.tk/alpha/music.html">Music</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</div>
</div>
</nav>
<div class="neighborhood-guides">
<div class="container">
<h2>What is this?</h2>
<p>This website is home to the music project: The Unthinkable.</p>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<iframe width="100%" height="225" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/77100370&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<iframe width="100%" height="225" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/188923984&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<iframe width="100%" height="225" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/187159699&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
</div>
</div>
</div>
<a name="blog"></a>
<div class="blog">
<iframe src="http://theunthinkable-blog.tk/wordpress/" frameborder="0" width="100%" height="300%" marginheight="0" marginwidth="0" scrolling="no"></iframe>
</div>
<div class="learn-more">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Edwin's Webspace</h3>
<p>Ever wanted your own place on the web; but don't know how?</p>
<p><a href="#">Learn more about Edwin's Webspace</a></p>
</div>
<div class="col-md-4">
<h3>Dot TK</h3>
<p>The company who gave us this domain name.</p>
<p><a href="http://www.freenom.com/en/index.html">Learn about Dot Tk</a></p>
</div>
<div class="col-md-4">
<h3>Hostinger</h3>
<p>The company who hosts this site 24/7!</p>
<p><a href="http://www.hostinger.co.uk/">Learn more about Hostinger</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5573204519348e87" async="async"></script>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5573204519348e87" async="async"></script>
</body>
可以在http://www.theunthinkable.tk：
查看我更喜欢解决方案是html或css，因为我之前从未使用过jquery。但是如果这是唯一的方法，请给我关于它的设置的所有说明。
感谢任何帮助的人：D
还可以摆脱导航栏周围的白色边框吗？
答案 0 :(得分：1)
您只能使用CSS将其粘贴到顶部 标头{ 宽度：100％ 身高： /无论你想要什么 / 位置：固定 顶部：0 }
如果你想创建酷炫的效果，导航在滚动上覆盖标题，你需要使用javascript。我会为您发表评论以便于使用
//.onscroll() is a built in method from your browser (window)
//it fires ...wait for it.... onscroll
window.onscroll = function () {
// adjust the 0 to trigger the effect at the right point
if (!docked && (menu.offsetTop - scrollTop() < 0)) {
menu.style.top = 0;
menu.style.position = 'fixed';
menu.className = 'docked';
docked = true;
} else if (docked && scrollTop() <= init) {
menu.style.position = 'absolute';
menu.style.top = init + 'px';
menu.className = menu.className.replace('docked', '');
docked = false;
}
};