你如何使导航栏“粘”？

Question

I'm making a site for a friend and I would like to make the nav bar sticky.我正在为朋友制作一个网站，我想让导航栏具有粘性。 Here's an example: http://www.w3schools.com/html/default.asp .这是一个示例： http : //www.w3schools.com/html/default.asp 。 I would like to have a picture where the header is in the example.我想要一张图片，其中标题在示例中。

Here is the code I have already made:这是我已经制作的代码：

<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&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;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&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;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&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;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>

This can be viewed at http://www.theunthinkable.tk :这可以在http://www.theunthinkable.tk上查看：

I would prefer if the solution was html or css as I have never used jquery before.我更喜欢解决方案是 html 还是 css，因为我以前从未使用过 jquery。 However If that is the only way please give me all the instructions for the set-up of it.但是，如果这是唯一的方法，请给我设置它的所有说明。

Thanks to anybody who helps :D感谢任何帮助的人：D

Also is it possible to get rid of the white boarders around the nav bar?是否有可能摆脱导航栏周围的白人？

Answer 1

You could use CSS only to stick it to the top header { width: 100% height: /whatever you want / position: fixed top: 0 }您只能使用 CSS 将其粘贴到顶部标题 { width: 100% height: /whatever you want / position: fixed top: 0 }

If you want to create that cool effect where the nav covers the title on scroll you would need to use javascript.如果你想创造那种很酷的效果，让导航覆盖滚动上的标题，你需要使用 javascript。 I'll comment it for you to make it easier to use我会为你评论，以便于使用

//.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;
    }
};

你如何使导航栏“粘”？

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-06-13 18:38:13

你如何使导航栏“粘”？

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-06-13 18:38:13

解决方案1
1 已采纳 2015-06-13 18:38:13