CODEWITHSUNDEEP
jqueryhtmlcss
Caspert
Caspert

Reputation: 4363

Content issue when add an fixed header with jQuery

I have developed a header with HTML. When you scroll more then 25px, the class fixed is added to the header with jQuery. See: http://codepen.io/anon/pen/jPXYKj

The class fixed has the following properties:

header.fixed {
    position: fixed;
    top: 0;
    width: 1055px;
}

Just the basic stuff of a fixed header. This is working, and after 25px it will scroll with you, but as you can see, the content will jump to above, because the height of the header is not anymore relative to the rest.

Hence my question. How to solve this problem so that the content remains in its original position, preferably without using absolute positioning.

I tried to add the class fixed to the body element and then call in my css the main part and add a margin-top to the main element, but then, When you scroll down and up, the main content is getting to low.

Upvotes: 0

Views: 76

Answers (4)

kidA
kidA

Reputation: 1377

You can add an else statement in the window.pageYOffset condition

if (window.pageYOffset > offset ) {
    $("header").addClass(' fixed');
} else {
    $("header").removeClass('fixed');
}

which pretty much removes the .fixed class and brings the header element to its original state.

Upvotes: 0

ttzn
ttzn

Reputation: 2613

Simply set a top margin for the main element as soon as the header is made fixed ; your content will keep its vertical offset, preventing it from "jumping". To achieve this, you may either add a class to the main element, or use the little known adjacency selector :

header.fixed + main {
  // 75px header height + 25px header top margin
  margin-top:100px;
}

header.fixed + main selects main elements following a header element with class fixed.

Demonstration of this pure CSS solution here.

Upvotes: 1

Praveen Singh
Praveen Singh

Reputation: 2567

You can add padding-top to the content when you are making the header fixed. See this snippet:

$(document).ready(function() {
  
  function fixedHeader() {
      // Global variables
      var offset = 25;

      // Scroll function
      $( window ).scroll(function () {

        // Where the magic happens
        if (window.pageYOffset > offset ) {
          $("header").addClass(' fixed');
          $(".content").addClass(' content-top');
        }

      });

    } fixedHeader();
  
  });
header { 
  height: 75px;
  width: 100%; 
  margin-top: 25px;
  position: relative;
  background: #1ed761;
}

.content-top {
    padding-top:100px;
}

section { padding-top: 30px;}
main > div {margin-bottom:30px;}

.fixed {
  position:fixed!important;
  top: 0;
  width: 1115px;
  z-index: 10;
    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
  <header class="row">
    Header
  </header>
  
  <main class="content">
    <section class="row">
      <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
      <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
       <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
       <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
       <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
       <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
       <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
       <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
       <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
       <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
      <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
      <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
      <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
      <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
    </section>
  </main>
</div><!-- End .container -->

Upvotes: 0

KZee
KZee

Reputation: 446

header{
  position: absolute;
  width: 1115px;
}
header.fixed{
  margin-top: 0;
}

Upvotes: 0

Related Questions