How to fix a header on scroll
You need some JS to do scroll events. The best way to do this is to set a new CSS class for the fixed position that will get assigned to the relevant div when scrolling goes past a certain point.
HTML
<div class="sticky"></div>
CSS
.fixed {
position: fixed;
top:0; left:0;
width: 100%; }
jQuery
$(window).scroll(function(){
var sticky = $('.sticky'),
scroll = $(window).scrollTop();
if (scroll >= 100) sticky.addClass('fixed');
else sticky.removeClass('fixed');
});
Example fiddle: http://jsfiddle.net/gxRC9/501/
EDIT: Extended example
If the trigger point is unknown but should be whenever the sticky element reaches the top of the screen, offset().top
can be used.
var stickyOffset = $('.sticky').offset().top;
$(window).scroll(function(){
var sticky = $('.sticky'),
scroll = $(window).scrollTop();
if (scroll >= stickyOffset) sticky.addClass('fixed');
else sticky.removeClass('fixed');
});
Extended example fiddle: http://jsfiddle.net/gxRC9/502/
how to fix sticky header on scroll?
Please notice that element .class
and element.class
are different.
as you are targeting the header element in the function I can assume your problem is that you are looking for an element with .sticky
class which is a descendant of header when you select header .sticky
; but you need the header itself.
header .sticky {
background: #fff;
padding: 20px 100px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
consider using header.sticky
to select the header with the .sticky
class. you have to fix other selectors too.
header.sticky {
background: #fff;
padding: 20px 100px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
have a look at CSS Selectors for more selector patterns.
How to get a Sticky header on website using Javascript?
Step 1. Use header.sticky
instead of header .sticky
(remove space)
Step 2. Add the following style to header.sticky
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
How TO - Sticky Element
CSS Flexible Sticky Header which may Grow and Pushes Below Items Down
It will get resolved if you change the position property.
Change it to sticky: position:sticky
CSS sticky header onscroll
It looks like you need to add the background color to the .header css class before the .onscroll class is added by javascript. Maybe adding this to your css might do it:
.header {
background-color: rgba(244, 244, 244, 0.95);
}
If that's not working, try adding it with !important like so:
.header {
background-color: rgba(244, 244, 244, 0.95) !important;
}
Related Topics
Greek and Text-Transform:Uppercase
React Animation for Moving an Element from One Parent to Another
How Detect Which Child Element Is Visible After Scrolling the Parent Div
How to Let a Div Stick to Cursor
Highlight an Individual Word Within a Text Block on Hover
How to Width-Wise Shrink-Wrap Content That Spans More Than One Line
Random Fullscreen Background Image on Browser Refresh
Get Pixelcolor of CSS Background Image
Jquery Word for Word Fade in Effect
How to Override the Style of the Material-Ui Switch Component When Checked
After Content Update from Ajax Jquery Not Work Properly
Changing Background Color of a Specific Row in Slickgrid
Using Cookies to Retain Stylesheet Preference Across Website
Iscroll 4 Not Working with Form <Select> Element iPhone Safari and Android Browser