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:
After scroll:
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!