My sticky on scroll header is covering the content

Question

So I've made a sticky on scroll header/navigation bar successfully.

How it looks like now

But I have a problem. When it reaches the top, it will automatically 'cover' the top part of my content, which has text on it so I wouldn't actually want it that way.

How I want it to be. Notice the space between header and photo (content).

I've tried adding a padding/margin to the content, but it doesn't work. It still scrolls down right to the content so it is covered.

Is there any way I could fix it so there is a 'space' between the header and the content?

Here is how my code looks like:

 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%; } nav ul { float: right; list-style: none; list-style-type: none; margin: 0; padding: 0; overflow: hidden; } nav ul::after { content: ""; display: table; clear: both; } nav ul li { font-family: 'Sifonn Pro'; background-color: transparent; border: transparent; cursor: pointer; text-align: center; display: inline; }.nav a { color: #061127; text-decoration: none; position: relative; font-size: 20px; margin: 0 6px; padding: 12px 12px; display: inline-block; }.nav-fixed { position: fixed; top: 0; left: 0; width: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="top"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="nav"> <nav> <ul> <li><a href="about.html">About</a></li> <li><a href="technology.html">Technology</a></li> <li><a href="help-centre.html">Help Centre</a></li> </ul> </nav> </div> <div class="bottom"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>

Notice that the lorem ipsum text skipped lines (covered by the header).

Answer 1

To have the white space between the fixed header and the content make the background-color on the .nav element white and add some padding-bottom to it. Then on the nav element, add the yellow background colour. These are the changes you need to make:

.nav {
  /* other rules... */
  background-color: #FFF;
  padding-bottom: 25px;
}

nav {
  /* other rules... */
  background-color: #fff672;
}

Full example:

 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: #FFF; padding-bottom: 25px; } #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%; background-color: #fff672; } nav ul { float: right; list-style: none; list-style-type: none; margin: 0; padding: 0; overflow: hidden; } nav ul::after { content: ""; display: table; clear: both; } nav ul li { font-family: 'Sifonn Pro'; background-color: transparent; border: transparent; cursor: pointer; text-align: center; display: inline; }.nav a { color: #061127; text-decoration: none; position: relative; font-size: 20px; margin: 0 6px; padding: 12px 12px; display: inline-block; }.nav-fixed { position: fixed; top: 0; left: 0; width: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="top"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="nav"> <nav> <ul> <li><a href="about.html">About</a></li> <li><a href="technology.html">Technology</a></li> <li><a href="help-centre.html">Help Centre</a></li> </ul> </nav> </div> <div class="bottom"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>

I'd advise against doing this, though, as the white gap looks very odd as the content scrolls up the page.

Answer 2

you need to keep the container of jour nav in the content and only position nav fixed

 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; 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: flex; align-items: center; justify-content: flex-end; padding-right: 8%; } nav ul { float: right; list-style: none; list-style-type: none; margin: 0; padding: 0; overflow: hidden; } nav ul::after { content: ""; display: table; clear: both; } nav ul li { font-family: 'Sifonn Pro'; background-color: transparent; border: transparent; cursor: pointer; text-align: center; display: inline; }.nav a { color: #061127; text-decoration: none; position: relative; font-size: 20px; margin: 0 6px; padding: 12px 12px; display: inline-block; }.nav-fixed { position: fixed; top: 0; left: 0; width: 100%; }.nav-container { height: 100px }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="top"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="nav-container"> <nav class="nav"> <ul> <li><a href="about.html">About</a></li> <li><a href="technology.html">Technology</a></li> <li><a href="help-centre.html">Help Centre</a></li> </ul> </nav> </div> <div class="bottom"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>