0

I have a navigation bar, which, after scrolling a certain distance down the page, the navigation's position style is set to fixed. However, just below the navigation I have three div elements displayed as inline-blocks with height 200px and width 250px and the center div has a transformation scale of 1.1. The center div, for some reason, when scrolling down, the navigation is fixed to the page but the center div appears above the navigation.

Here's a before and after screenshot when scrolling:

Before scroll:

enter image description here

After scroll:

enter image description here

Here is the code:

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  if (scrollTop >= 150) {
    $(".viewport").css("position", "fixed");
    $(".viewport").css("top", "0");
  } else {
    $(".viewport").css("position", "static");
  }
});
.header {
  box-shadow: inset 0 -15px 15px -15px #ffffff, inset 0 300px 300px -300px #000000;
  background-color: #2b2b2b;
  width: 100%;
  height: 150px;
}
.viewport {
  border-bottom: 1px solid #ffffff;
  box-shadow: inset 0 15px 15px -15px #ffffff, 0 2px 1px -1px rgba(0, 0, 0, .4);
  background-color: #137ed6;
  width: 100%;
  height: 50px;
}
.hot {
  border-bottom: 1px solid #e6e6e6;
  border-radius: 5px;
  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, .4);
  background-color: rgba(0, 0, 0, .4);
  width: 150px;
  height: 100px;
  margin-right: 10px;
  display: inline-block;
}
.hot.cen {
  transform: scale(1.1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">

</div>
<div class="viewport">

</div>
<div style="text-align: center;margin-top: 15px;">
  <div class="hot">



  </div>
  <div class="hot cen">



  </div>
  <div class="hot">



  </div>
</div>
<div style="margin-bottom:400px;"></div>

I re-sized the three div elements from 250x200 to 150x100 for the purpose of the code snippet.

This is my first post so I apologies if the formatting is incorrect. Any help will greatly appreciated, thank you!

dllhell
  • 1,987
  • 3
  • 34
  • 51
Leocus
  • 1
  • 1

0 Answers0