Lesson 9: Add a Sticky Search Bar

Matt Bradford-Aunger Updated by Matt Bradford-Aunger

In the final lesson, you'll learn to make the search bar stick to the top of the browser window. You'll use a bunch of the skills you've learned to wrap the search container in a <div> and implement a scroll function that'll fix the search bar and results to the top of the browser window no matter how far a user scrolls.


W3Schools: How to Create a Sticky Header

Code Snippets

<!-- Sticky Search Bar Function -->
window.onscroll = function() {stickySearch()};
var header = document.getElementById("search-container");
var sticky = header.offsetTop;
function stickySearch() {
if (window.pageYOffset > sticky) {
} else {

How did we do?

Lesson 8: Replace Top Articles with Featured Articles

Congratulations You've Finished the Course 🎉