Description
More and more, I’m seeing sites that have certain “sticky content” (elements that remain in view as the user scrolls the page). In most cases, keeping elements in view can be achieved by simply setting the CSS positioning of that element to “fixed.”
This approach solves many basic situations, but sometimes you’ll want to have the content set to fixed only after the user has reached a specific scrolling threshold on the page. In the following example, I will explain how to achieve this.
Make sure this is what you’re looking for – View Demo | Download
Note: This code requires jQuery.
Step 1
First, find the top of the “sticky” object (in relation to the window) and store it in a variable. As you can see, I’ve chosen to use the class “sticky” for the object I want to remain in view.
$(function(){ // document ready
var stickyTop = $('.sticky').offset().top; // returns number
});
If you’re not familiar with jQuery’s Document Ready, you can read about it by following the link.
Step 2
Create an anonymous function that is called when the window scroll event fires. At the same time, you’ll want to store the current position of the window top in a variable. The value of this variable will be changed every time the user scrolls the window.
$(function(){ // document ready
var stickyTop = $('.sticky').offset().top; // returns number
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
});
});
Step 3
Create an if statement that asks whether the top of the window is greater than the top of the sticky element. If true, the element will be set to fixed positioning. Otherwise, it will be set to static positioning.
$(function(){ // document ready
var stickyTop = $('.sticky').offset().top; // returns number
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stickyTop < windowTop) {
$('.sticky').css({ position: 'fixed', top: 0 });
}
else {
$('.sticky').css('position','static');
}
});
});
That's it. You're done!
Note: The CSS property "top" is set to 0 when the element is fixed positioned. If you find the element jumps when you reach the scroll threshold, play around with this value. Sometimes the margins of the content within the sticky element can affect where the element sits in relation to the top of the window.
Step 4 (Optional)
You might consider including an additional wrapping if statement which only calls the scroll event function when an element with the class "sticky" is present in the DOM.
If the element is universally throughout the site (i.e. your site header), this won't be an issue. However if the element is only on certain pages, you will get an error when loading pages where the sticky element does not exist. To safeguard against this, add the following code:
$(function(){ // document ready
if (!!$('.sticky').offset()) { // make sure ".sticky" element exists
var stickyTop = $('.sticky').offset().top; // returns number
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stickyTop < windowTop){
$('.sticky').css({ position: 'fixed', top: 0 });
}
else {
$('.sticky').css('position','static');
}
});
}
});
Conclusion
This is really just the beginning of what you can do with scrolling thresholds. You can put whatever code you like within the anonymous function we created and have it run once the threshold is met. Try it out!
Demo
Feedback
Did this tutorial help you? Could this tutorial be improved? Let me know in the comments!
Thanks to Mitgux, ___mohsen, and _joshnh for their feedback.
Pingback: JQuery: Sticky Float Share Button, Menus, Widget, Sidebar etc. - Shellcreeper.com
Pingback: Project: Sticky Sidebar | Skillcrush