什么让我的导航栏在滚动时粘在上面？

时间：2017-03-22 08:14:27

标签： javascript html css navbar jsfiddle

我想知道是什么让我的导航栏在滚动时粘在顶部，因为我只有基本的html和css代码？上次没有javascript我无法这样做。提前致谢

这是JSFiddle链接：https://jsfiddle.net/tw03egpc/ 

body {
  background-color: black;
}

#heder {
  background-color: blue;
  color: aqua;
}

#wrap {
  z-index: 1;
  margin: 0;
  padding: 0;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

#navWrap {
  height: 30px;
  opacity: 0.7;
  filter: alpha(opacity=80);
}

#nav {
  height: 95px;
  padding: 5px;
  background: #999;
}

#nav ul {
  margin: 0;
  padding: 0;
}

#nav li {
  float: left;
  padding: 3px 8px;
  background-color: grey opacity: 0.5;
  margin: 0;
  color: #f00;
  list-style-type: none;
}

#nav li a {
  color: black;
  text-decoration: none;
  margin: 10 px;
  -webkit-transition: 0.2s 0.2s;
}

#nav li a:hover {
  color: red;
}

br.clearLeft {
  clear: : left;
}

#positionli {
  position: absolute;
  top: 70px;
  left: 10pX;
}

.image {
  width: 1000px;
  height: 725px;
  opacity: 0.3;
  filter: alpha(opacity=30);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: ass 1s ease;
  transition: : ass 1s ease;
}

.image:hover {
  width: 1100px;
  height: 800px;
  opacity: 0.9;
  filter: alpha(opacity=100);
}

.imageframe {
  border: 3px solid #fff;
  width: 1000px;
  height: 725px;
  margin: 0px;
  overflow: hidden;
  -webkit-box-shadow: 5px 5px 5px 5px #111;
  box-shadow: 5px 5px 5px #111;
}

#positionimage {
  position: absolute;
  top: 108px;
  left: 2;
}

#div {
  width: 580;
  height: 678;
  overflow: scroll;
  border: 1px solid white;
  padding: 25;
  margin: 25px;
  position: absolute;
  right: 100px;
  top: 84px;
  left: 988px;
}

.p {
  color: white;
}

#h1 {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 837;
}

p {
  width: 700px;
  color: aliceblue;
  padding: 20px;
  margin: 10px;
  position: absolute;
  top: 1100px;
}

#h11 {
  color: white;
  position: relative;
  top: 1070;
  margin: 10px;
}
<body>
  <div id="wrap">
    <div id="header">
      <div id="navWrap">
        <div id="nav">
          <div id="positionli">
            <ul>
              <li><a href="#"> Demo Link 1</a></li>
              <li><a href="#"> Demo Link 2</a></li>
              <li><a href="#"> Demo Link 3</a></li>
              <li><a href="#"> Demo Link 4</a></li>
            </ul>
          </div>
          <br class="clearLeft" />
        </div>
      </div>
    </div>
  </div>

  <div id="positionimage">
    <div class="imageframe">
      <img class="image" src="https://www.qdtricks.net/wp-content/uploads/2016/05/hd-road-wallpaper.jpg">
    </div>
  </div>

  <div id="div">
    <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FInfinitiv%2Fposts%2F1250296021672270&width=500" width="500" height="475" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

    <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FInfinitiv%2Fvideos%2F1266500823385123%2F&show_text=0&width=400" width="500" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"
      allowFullScreen="true"></iframe>
  </div>

  <!-- <h1> _____Videos_____ </h1>-->
  <!-- <h1 id="h11"> About us </h1> -->

  <p> Infinitiv je troclani sastav nastao u Pozarevcu krajem 2010. koji danas radi i stvara u Beogradu. 2012. su izdali svoj prvi EP pod nazivom ,,Deep inside''. Posle dosta svirki sirom Srbije i ucesca na festivalima i takmicenjima(BDFL 2013, Majska gitarijada
    2012), bend krajem 2013. objavljuje svoj prvi album ''U beskraj'', sa opcijom free download-a preko Nocturne magazine-a. Nakon toga, bend zapocinje koncertnu promociju pesama sa prvog albuma, kao i izradu i promociju pesama koje ce se naci na drugom
    albumu cije je objavljivanje planirano za 2017 godinu. U julu 2016. bend osvaja prvo mesto na Kursumlijskoj gitarijadi
  </p>
  <br/>
</body>

2 个答案:

答案 0 :(得分：2)

由于nav中定义了position: fixed，您的#wrap栏位于顶部。

position: fixed会将元素及其子元素修复到指定位置。

了解有关HTML定位的更多信息。

  1. https://developer.mozilla.org/en/docs/Web/CSS/position
  2. https://www.w3schools.com/cssref/pr_class_position.asp（查看 播放>> ）

    3. ＆＃13;
    ＆＃13; 
    body {
  background-color: black;
}

#heder {
  background-color: blue;
  color: aqua;
}

#wrap {
  z-index: 1;
  margin: 0;
  padding: 0;
  /* comment below line "position: fixed;" to get the default behaviour */
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

#navWrap {
  height: 30px;
  opacity: 0.7;
  filter: alpha(opacity=80);
}

#nav {
  height: 95px;
  padding: 5px;
  background: #999;
}

#nav ul {
  margin: 0;
  padding: 0;
}

#nav li {
  float: left;
  padding: 3px 8px;
  background-color: grey opacity: 0.5;
  margin: 0;
  color: #f00;
  list-style-type: none;
}

#nav li a {
  color: black;
  text-decoration: none;
  margin: 10 px;
  -webkit-transition: 0.2s 0.2s;
}

#nav li a:hover {
  color: red;
}

br.clearLeft {
  clear: : left;
}

#positionli {
  position: absolute;
  top: 70px;
  left: 10pX;
}

.image {
  width: 1000px;
  height: 725px;
  opacity: 0.3;
  filter: alpha(opacity=30);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: ass 1s ease;
  transition: : ass 1s ease;
}

.image:hover {
  width: 1100px;
  height: 800px;
  opacity: 0.9;
  filter: alpha(opacity=100);
}

.imageframe {
  border: 3px solid #fff;
  width: 1000px;
  height: 725px;
  margin: 0px;
  overflow: hidden;
  -webkit-box-shadow: 5px 5px 5px 5px #111;
  box-shadow: 5px 5px 5px #111;
}

#positionimage {
  position: absolute;
  top: 108px;
  left: 2;
}

#div {
  width: 580;
  height: 678;
  overflow: scroll;
  border: 1px solid white;
  padding: 25;
  margin: 25px;
  position: absolute;
  right: 100px;
  top: 84px;
  left: 988px;
}

.p {
  color: white;
}

#h1 {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 837;
}

p {
  width: 700px;
  color: aliceblue;
  padding: 20px;
  margin: 10px;
  position: absolute;
  top: 1100px;
}

#h11 {
  color: white;
  position: relative;
  top: 1070;
  margin: 10px;
}
    ＆＃13; 
    <body>
  <div id="wrap">
    <div id="header">
      <div id="navWrap">
        <div id="nav">
          <div id="positionli">
            <ul>
              <li><a href="#"> Demo Link 1</a></li>
              <li><a href="#"> Demo Link 2</a></li>
              <li><a href="#"> Demo Link 3</a></li>
              <li><a href="#"> Demo Link 4</a></li>
            </ul>
          </div>
          <br class="clearLeft" />
        </div>
      </div>
    </div>
  </div>

  <div id="positionimage">
    <div class="imageframe">
      <img class="image" src="https://www.qdtricks.net/wp-content/uploads/2016/05/hd-road-wallpaper.jpg">
    </div>
  </div>

  <div id="div">
    <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FInfinitiv%2Fposts%2F1250296021672270&width=500" width="500" height="475" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

    <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FInfinitiv%2Fvideos%2F1266500823385123%2F&show_text=0&width=400" width="500" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"
      allowFullScreen="true"></iframe>
  </div>

  <!-- <h1> _____Videos_____ </h1>-->
  <!-- <h1 id="h11"> About us </h1> -->

  <p> Infinitiv je troclani sastav nastao u Pozarevcu krajem 2010. koji danas radi i stvara u Beogradu. 2012. su izdali svoj prvi EP pod nazivom ,,Deep inside''. Posle dosta svirki sirom Srbije i ucesca na festivalima i takmicenjima(BDFL 2013, Majska gitarijada
    2012), bend krajem 2013. objavljuje svoj prvi album ''U beskraj'', sa opcijom free download-a preko Nocturne magazine-a. Nakon toga, bend zapocinje koncertnu promociju pesama sa prvog albuma, kao i izradu i promociju pesama koje ce se naci na drugom
    albumu cije je objavljivanje planirano za 2017 godinu. U julu 2016. bend osvaja prvo mesto na Kursumlijskoj gitarijadi
  </p>
  <br/>
</body>
    ＆＃13;
    ＆＃13;
    ＆＃13;

答案 1 :(得分：0)

就像@Sreenath已经说过：你使用＆＃39; position：fixed＆＃39;为你的#wrap。

尝试使用它：

#wrap {
  z-index: 1;
  margin: 0;
  padding: 0;
  position: relative;
  left: 0;
  top:0;
  width: 100%;
}

除非你想要其他行为，否则你必须清楚地提到你想要达到的目标。

相关问题
最新问题