Sample code for making the header fixed when scrolling

A memo on how to implement a fixed header using html/css/js

How to create a fixed header

1. Give the part you want to fix an ID (Class is also OK)
2. Add a specific class when scrolling with jQuery
3. Fix the specific class that was added and adjust the design

It can be done in this way.

Header HTML Code

For example, give the DIV that encloses the global menu an ID of [header] like this:

<div id="header">
  <div class="global-nav">
    <nav class="header-nav">
      <ul class="nav">
        <li><a href="/blog/en/index.html/">HOME</a></li>
	<li><a href="/blog/en/news.html/">news</a></li>
	<li><a href="/blog/en/guidance/">Message from the President</a></li>
	<li><a href="/blog/en/facility/">Facility Information</a></li>
	<li><a href="/blog/en/access/">MAP &amp; ACCESS</a></li>
      </ul>
      </nav>
  </div>
</div>

jQuery code for fixed header

Use jQuery to add the header ID [header]

• When scrolled 50px from the TOP
• Add the [.is-fixed] class
• When the page is not scrolled 50px from the top
• [is-fixed] class deleted

The following instructions are given.

Save it in a separate file, such as common.js.

$(window).bind('scroll', function(){ if($(this).scrollTop() > 50) { $('#header').addClass('is-fixed'); }else{ $('#header').removeClass('is-fixed'); } });

How to set up CSS

We will demonstrate how the header class changes when it is scrolled and not scrolled.

HTML when not scrolled

<div id="header">
  <div class="global-nav">
    <nav class="header-nav">
      <ul class="nav">
        <li><a href="/blog/en/index.html/">HOME</a></li>
	<li><a href="/blog/en/news.html/">news</a></li>
	<li><a href="/blog/en/guidance/">Message from the President</a></li>
	<li><a href="/blog/en/facility/">Facility Information</a></li>
	<li><a href="/blog/en/access/">MAP &amp; ACCESS</a></li>
      </ul>
      </nav>
  </div>
</div>

HTML when scrolled

[header] The [is-fixed] class will be added to the DIV with the ID

<div id="header" class="is-fixed">
  <div class="global-nav">
    <nav class="header-nav">
      <ul class="nav">
        <li><a href="/blog/en/index.html/">HOME</a></li>
	<li><a href="/blog/en/news.html/">news</a></li>
	<li><a href="/blog/en/guidance/">Message from the President</a></li>
	<li><a href="/blog/en/facility/">Facility Information</a></li>
	<li><a href="/blog/en/access/">MAP &amp; ACCESS</a></li>
      </ul>
      </nav>
  </div>
</div>

Fixed Header CSS Code Example

You can add a design to the CSS class 【is-fixed】. If you want a fixed header, add 【position:fixed】 to make it fixed.

You can fix the global menu from the beginning with [position:fixed] and then make small changes to the design, such as changing the background color only when scrolling, to make it appear fixed.

.is-fixed .global-nav { position: fixed; top: 0; left: 0; background: #ffffff; padding: 0 20px 5px 5%; }

How to link with HTML

• index.html - HTML file with header code
• style.css - CSS file containing the CSS code
• common.js - JS file

Let's say you have these two files: index.html Add the following inside:

• External style.css loading code
• jQuery library loading code
• Loading code for the external file common.js

is.

<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="common.js"></script>

summary

You can add specific code when scrolling with some simple JS code.

When using WordPress, many themes have a fixed header from the beginning.myStickymenu] allows you to create a fixed header without any coding!

WordPress x no-code construction is great!