Create Parallax Scrolling Fixed & Sticky Header with CSS

Category: Parallax Scrolling | July 16, 2018
Parallax scrolling Header with CSS
Author: Alan Mok
Official Page: Go to Website
Last Update: August 31, 2019
License: MIT

To stand out your website design, It’s important to have something unique. You need to think and find a different way to design your website.

One of the great feature that you can implement to make your site header fixed & sticky with parallax scrolling. It does not only make your site look good but also enhance the user experience.

To create a parallax scrolling header is a quite simple and easy task with CSS only. All you have to fix the position of header elements by using the position: fixed; property.

That’s what I will do in today tutorial. Furthermore, I also use a little bit Javascript to handle it’s positioning.

Additional, I will some cool looking content on the header background image and a directional arrow to draw user attention to scroll down.

When the user scrolls down to the page,  the header gives parallax animation. Similar, when they scroll up they will see the nice and cool looking effect.

In the previous post, We have shared you a Javascript plugin to create an easy parallax scrolling section which is quite easy to implement on any kind of website.

Create Parallax Scrolling for Header

Let’s call the main jquery file and add header.css in the head of the page.

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="parallax.css" />

Now include the following simple HTML code in your page.

<div id="header">
  <div class="center" id="headerc">
    <div class="middle">
      <h1>Sky</h1>
      <span>Fixed header and parallax scrolling background with a rhombus indicator</span>
    </div>
  </div>
</div>
<div id="pageHr"> 
  <i><i>↓</i></i>
</div>
<div id="page">
   Add Your own HTML Code Here.
</div>

To make work the header scrolling, Simply add the following javascript code.

$(document).scroll(function() {
  var st = $(this).scrollTop();
  $("#header").css({
    "background-position-y": (-st/20)
  })
  $("#headerc").css({
    "top": (-st/5),
    "bottom": (st/5)
  })
});

That’s it. Your site header is ready to use. You can easily customize it as you want and add your own element inside the container to make it more beautiful.

You May Also Like

Leave a Comment