CODEWITHSUNDEEP
javascripthtmlcssnavbarjsfiddle
vucko95
vucko95

Reputation: 103

What is making my navigation bar sticking on top while scrolling?

I am wondering what is making my nav bar sticking to the top while scrolling since I have just basic html and css code? Last time I was not able to do so without javascript. Thanks in advance

Here is JSFiddle link: 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>

Upvotes: 0

Views: 376

Answers (2)

Pugazh
Pugazh

Reputation: 9561

Your nav bar is sticking to the top because of position: fixed defined in #wrap.

position: fixed will fix the element and it's children to the specified position.

To know more about HTML positioning.

  1. https://developer.mozilla.org/en/docs/Web/CSS/position
  2. https://www.w3schools.com/cssref/pr_class_position.asp (Check the Play It ›› )

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

Upvotes: 2

kevin b.
kevin b.

Reputation: 1534

Like @Sreenath already said: you use 'position: fixed' for your #wrap.

Try to use this:

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

Unless you want other behaviour, then you'll have to clearly mention what you want to achieve.

Upvotes: 0

Related Questions