Jquery 您如何制作导航条；粘乎乎的；？_Jquery_Html_Css_Navigation

Jquery 您如何制作导航条；粘乎乎的；？

jquery html css navigation

Jquery 您如何制作导航条；粘乎乎的；？,jquery,html,css,navigation,Jquery,Html,Css,Navigation,我正在为一个朋友做一个网站，我想让导航栏粘起来。下面是一个例子：。我想有一张图片，标题在示例中的位置以下是我已经编写的代码： <html> <head class="masthead"> <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet"> <link rel="stylesheet" h

我正在为一个朋友做一个网站，我想让导航栏粘起来。下面是一个例子：。我想有一张图片，标题在示例中的位置

以下是我已经编写的代码：

<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>


琼伯伦先生{
背景图片：url（'/c1.staticflickr.com/9/8723/16322346204_6a1a86440a_c.jpg'）；
高度：500px；
背景重复：无重复；
背景尺寸：封面；
背景附件：固定；
}
.jumbotron.集装箱{
位置：相对位置；
顶部：125px；
左：25px；
}
jumbotron h1博士{
颜色：#fff；
字体大小：48px；
字体系列：“Shift”，无衬线；
字体大小：粗体；
}
琼博特伦p{
字体大小：20px；
颜色：#fff；
}
.导航a{
颜色：#5A5A；
字体大小：11px；
字体大小：粗体；
填充：14px 10px；
文本转换：大写；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
}
李{
显示：内联；
}
.了解更多{
背景色：#ffffff；
}
.了解更多h3{
字体系列：“Shift”，无衬线；
字号：18px；
字体大小：粗体；
}
.了解更多{
颜色：#00b0ff；
}
.邻里指南{
背景色：#EFEF；
边框底部：1px实心#dbdb
}
.邻里指南h2{
颜色：#393c3d；
字体大小：24px；
}
.邻里指南{
字体大小：15px；
边缘底部：13px；
}
函数resizeIframe（iframeID）
{       
var iframe=window.parent.document.getElementById（iframeID）；
var container=document.getElementById（'content'）；
iframe.style.height=container.offsetHeight+'px'；
} 
.blog，iframe{overflow:hidden；}
不可思议的

可在以下网址查看：

我希望解决方案是html还是css，因为我以前从未使用过jquery。但是，如果这是唯一的方法，请给我所有的设置说明

感谢所有帮助我的人：D

还有可能去掉导航栏周围的白色边框吗？

您可以使用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;
    }
};

/.onscroll（）是浏览器（窗口）中的内置方法
//它开火了……等等。。。。昂斯克罗尔
window.onscroll=函数（）{
//调整0以在正确的点触发效果
如果（！docked&&（menu.offsetTop-scrollTop（）<0））{
menu.style.top=0；
menu.style.position='fixed'；
menu.className='docked'；
停靠=正确；
}else if（docked&&scrollTop（））这篇文章提供了另一种很好的方法。谢谢，这正是我所需要的