jQuery Fixed Header (DIV) on Page Scroll or Window Scroll with Example

By: Suresh Dasari Mar 3, 2015

Introduction:

Here I will explain jQuery fixed header or div on scrolling example or jQuery fixed header or div on page scroll or windows scroll with example. jQuery fixed header on scroll is used to display header at the top of the web page at all times during page or window scroll.

Description:

In previous posts I explained jQuery floating fixed navigation menu example, jQuery fixed div header notification bar on scroll with fade in out, jQuery Google Currency Converter API Example, jQuery generate thumbnails from youtube videos, jQuery Change style of controls, jQuery Add fade in effect to webpage, and many articles relating to JQuery and modal popup. Now I will explain how to implement jQuery fixed header on page scrolling example.

To implement this functionality we need to write the code like as shown below

<html>

<head>

window.onscroll = scrollheader;

window.onload = scrollheader;

window.onresize = scrollheader;

function scrollheader() {

var ww = window.innerWidth; //WINDOW WIDTH

var wh = window.innerHeight; //WINDOW HEIGHT

var hw = $(".header").width(); //HEADER WIDTH

var hh = $(".header").height(); //HEADER HEIGHT

var o = window.pageYOffset; //OFFSET OF THE WINDOW

//IF THE PAGE IS SCROLLED TO WHERE THE HEADER WOULD BE INVISIBLE

if(o>hh){

//IF WINDOW WIDTH > HEADER WIDTH

if (ww > hw) {

$(".header").show();

$(".header").css({"position":"fixed", "top":"0"});

} else {

$(".header").css({ "position": "static" });

$(".header").hide();

}

} else {

$(".header").css({ "position": "static" });

$(".header").hide();

}

</script>

#nav {

padding: 5px;

background: #999;

}

#nav ul {

margin: 0;

padding: 0;

}

#nav li {

float: left;

padding: 3px 8px;

background-color: #FFF;

margin: 0 10px 0 0;

color: #F00;

list-style-type: none;

}

#nav li a {

color: #F00;

text-decoration: none;

}

#nav li a:hover {

text-decoration: underline;

}

br.clearLeft {clear: left;

}

</style>

</head>

<body>

</div>

<ul>

</ul>

</div>

Scroll down for the demo...<br>

</body>

</html>

Demo

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

Subscribe by RSS

ASP.NET,C#.NET,VB.NET,JQuery,JavaScript,Gridview

jQuery Fixed Header (DIV) on Page Scroll or Window Scroll with Example

0 comments :

Give your Valuable Comments

Tags