I managed to create a sticky on-scroll header/navigation bar successfully.
Here is how it looks now
However, I encountered an issue. When it reaches the top, it automatically 'covers' the top part of my content, which has text on it, and I don't want it that way.
This is how I want it to be. Please notice the space between the header and the photo (content).
I tried adding padding/margin to the content, but it didn't work. It still scrolls down right to the content, causing it to be covered.
Is there any way I could solve this so there is a noticeable 'space' between the header and the content?
Below is the snippet of my code:
var stickyOffset = $('.nav').offset().top;
$(window).scroll(function(){
var sticky = $('.nav'),
scroll = $(window).scrollTop();
if (scroll >= stickyOffset) sticky.addClass('nav-fixed');
else sticky.removeClass('nav-fixed');
});.top p, .bottom p {
font-size: 18px;
}
.nav {
box-shadow: 0 4px 8px 0 rgba(121, 121, 121, 0.1);
z-index: 99;
display: table;
height: 100px;
width: 100%;
background-color: #fff672;
}
#home_btn_header {
margin: 0;
width: 90px;
height: 85px;
background-image: url(drone.png);
background-size: cover;
background-color: transparent;
border: transparent;
cursor: pointer;
}
nav {
display: table-cell;
vertical-align: middle;
padding-right: 8%;
}
/* CSS continues... */
It's important to note that the lorem ipsum text lines are being skipped due to the header covering them up.