CODEWITHSUNDEEP
javascriptjqueryhtmlcsscss-position
Elder
Elder

Reputation: 363

Fixed menu does not work (menu does not "stick" )

I want to make a fixed menu. However, when it scrolls, the menu does not "stick" to the browser window. When I remove position: relative; with navbar__box the menu is sticky and scrolls, but the transition from sticky to fixed is not smooth...

window.onscroll = function() {myFunction()};
function myFunction() {
  if (window.scrollY > 0) {
    var parentwidth = $('.header').width();
    $('.navbar__box').addClass("fixed").width(parentwidth);
  } else {
    $('.navbar__box').removeClass('fixed').width(parentwidth);
  }
}
.fixed {
  background: aliceblue;
  box-shadow: 0 1px 7px $black;
  position: fixed;
  top: 0;
  padding-top: 10px;
  z-index: 1299;
}
    
.navbar__box {
  position: relative;
  transition: all 0.3s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header" >
  <div class="navbar__box">
    <div class="navbar">
      <nav  class="navbar__nav">
        <ul id="nav" class="navbar__nav--list">
          <li class="navbar__nav--list-item">
            <a href="#Home">Home</a>
          </li>
         </ul>
      </nav>
     </div>
  </div>
</header>

Upvotes: 0

Views: 77

Answers (2)

RiddleMeThis
RiddleMeThis

Reputation: 1345

updated CSS - example fiddle - I just removed the unnecessary position: relative on .navbar__box. 

.fixed {
background: red;
box-shadow: 0 1px 7px black;
position: fixed;
top: 0;
padding-top: 10px;
z-index: 1299;
}

.navbar__box {
transition: all 0.3s ease-in-out;
}

Upvotes: 1

Victor
Victor

Reputation: 714

Change the order of your css/classes. Looks like .nav__box is overwriting .fixed

.navbar__box {
  position: relative;
  transition: all 0.3s ease-in-out;
}

.fixed {
  background: $aliceblue;
  box-shadow: 0 1px 7px $black;
  position: fixed;
  top: 0;
  padding-top: 10px;
  z-index: 1299;
}

Fiddle

Upvotes: 1

Related Questions