个人中心
gpt4 book ai didi

jquery - 你如何制作导航栏 "sticky"？

转载 作者：行者123 更新时间：2023-11-28 17:03:16 24 4
gpt4 key购买 nike

我正在为一个 friend 制作一个网站，我想将导航栏设为粘性。这是一个例子: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&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>

这可以在 http://www.theunthinkable.tk 查看:

如果解决方案是 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;
    }
};

关于jquery - 你如何制作导航栏 "sticky"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30822048/

24 4 0
文章推荐： css - 属性 nth-child 似乎在 JSP CSS 中不起作用
文章推荐： JavaScript 从 10 开始递减，然后在 0 时执行某些操作
文章推荐： javascript - 在棋盘上添加数字和字母
文章推荐： javascript - 按复选框显示/隐藏 div 链接 jquery 过滤
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com