In this article I will show you sticky header on scroll jQuery using css. This effect will take place when the user scroll down the page and it reaches height 72px with the help of window.scroll function. The sticky class is getting activated and subheading will stick on the top of the page.
Copy and paste the Html code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body {
height: 2000px;
}
header {
height: 72px;
border-bottom: 1px solid #000;
padding: 10px 0;
}
#sub_head {
height: 18px;
border-bottom: 1px solid #ccc;
padding: 5px 0;
}
#sub_head.sticky {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
z-index: 99999;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 72) {
$("#sub_head").addClass("sticky");
} else {
$("#sub_head").removeClass("sticky");
}
});
});
</script>
</head>
<body>
<header>
<img src="http://www.infinetsoft.com/Uploads/20160523103730logosmall.png" />
</header>
<div id="sub_head">
some sub header
</div>
</body>
</html>
Description: The html page contains header tag(has logo), div tag (id as sub_head) and sticky fixed header css class. When the user scrolls down the page window, scroll jQuery function calls and sticky class(fixed header css) will get added using jQuery addclass property i.e (fixed header on scroll jQuery) . If the user scrolls up, the css class sticky will get removed and the page will display as normal.
Post your comments / questions
Recent Article
- ImportError: cannot import name 'url' from 'django.conf.urls' - Django Error
- How to Enable Virtualization in BIOS Security Settings in Intel Processors For Android Studio?
- Dependency 'androidx.activity:activity:1.8.0' requires libraries and applications that depend on it.
- AttributeError: 'NoneType' object has no attribute 'get_text' - Python
- ModuleNotFoundError: No module named 'openpyxl' - Python
- How to get thumbnail from vimeo video URL in Python?
- Remove all special characters, punctuation except spaces from string - Python
- OSError: cannot write mode RGBA as JPEG- Python
Related Article