What is the best way to make a sticky floating sidebar that stays fixed while scrolling?

Question

What is the best way to make a sticky floating sidebar that stays fixed while scrolling?

I'm facing a challenge on my website where I want a sidebar on the left to stay with the user as they scroll. The sidebar should scroll along with the user until it's 5px from the top of the page, at which point it should remain fixed in place.

In some cases, the viewport may be too small to fit the entire sidebar on the screen. This isn't a major issue, but I would like the sidebar to reach the footer of the page when the user scrolls to the bottom, and then scroll along with the page again.

I've included the code for my site and an attempt to achieve the first part of my question (although it's not currently working): jsfiddle.

The first part of the question should be clear, but the second part might be a bit confusing. Here's a mockup to help visualize it:

Here's the javascript code I've used for the first part:

$(document).ready(function () {
    var theLoc = 5;
    var links = $('#left');
    $(window).scroll(function () {
        console.log('scroll');
        if (theLoc >= $(window).scrollTop()) {
            if (links.hasClass('fixed')) {
                links.removeClass('fixed');
            }
        } else {
            if (!links.hasClass('fixed')) {
                links.addClass('fixed');
            }
        }
    });
});

It might also be a CSS issue:

.fixed {
    position: fixed;
}

I've tried adjusting the height, but it didn't seem to make a difference.

javascript jquery css scroll

Answer 1

Answer №1

I tackled this problem a while back and came up with a solution. Here is the code snippet I used: Take a look at the JSFiddle.

(Keep in mind that you might need to adjust your HTML structure a bit. I recommend using divs and floating them to arrange your content. Alternatively, you can follow the code/logic provided below and create your own layout.)

Here's a basic overview:
- Obtain the necessary elements
- Determine the initial position of the sidebar upon page load
- Calculate #content.outerHeight()

With these variables set, during the window scroll event, check if we are either <= our original sidebarTop position or if we have surpassed the blogHeight. If either condition is met, remove the sticky class. Alternatively, if our scroll position is >= the original sidebar position, then add the .sticky class (which includes position: fixed).

Explore the JSFiddle (Click here)

The Javascript snippet is as follows:

// Store the fixed sidebar variables for scrolling functionality
var $sidebar = $('#sidebar-nav');

// Obtain and retain the initial position of #sidebar-nav for comparison
var sidebarTop = $sidebar.position().top;

// Adjust the `- 10` to control when it should disappear upon reaching the footer.
var blogHeight = $('#content').outerHeight() - 10;

// Bind the function below to the scroll event
$(window).scroll(fixSidebarOnScroll);

// The following function is called on window scroll (as bound above)
function fixSidebarOnScroll() {

    // Record our current scroll position
    var windowScrollTop = $(window).scrollTop();

    // Toggle the sticky class based on specific conditions
    if (windowScrollTop >= blogHeight || windowScrollTop <= sidebarTop) {
        $sidebar.removeClass('sticky');
    } else if (windowScrollTop >= sidebarTop) {
        if (!$sidebar.hasClass('sticky')) {
            $sidebar.addClass('sticky');
        }
    }
}

The HTML section:

<header>This is the header!</header>
<ul id="sidebar-nav" class="nav nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
</ul>
<div id="content">Content goes here. Scroll down to witness the sticky feature!</div>
<div class="clear"></div>
<div id="footer">This is the footer</div>

The CSS styles:

/* Fixate the navbar upon window scroll */
#sidebar-nav.sticky {position:fixed;top:5px;}

/* Additional styling for the HTML markup */
header {
    border:1px solid #aaa;
    background-color:yellow;
    margin-bottom:5px;
    height:50px;
}
#sidebar-nav {
    width:150px;
    border:1px solid #ddd;
    margin:0;
    padding:0;
    float:left;
}
#sidebar-nav li {
    list-style:none;
    border:1px solid #ddd;
    margin:10px;
    padding:2px;
}
#content {
    height:2000px;
    width:500px;
    padding:10px;
    border:1px solid #ddd;
    margin:0 0 10px 5px;
    float:right;
}
#footer {
    height:800px;
    border:1px solid green;
    background-color:#ddd;
}
.clear {
    clear:both;
}

:)

Answer 2

I tackled this problem a while back and came up with a solution. Here is the code snippet I used: Take a look at the JSFiddle.

(Keep in mind that you might need to adjust your HTML structure a bit. I recommend using divs and floating them to arrange your content. Alternatively, you can follow the code/logic provided below and create your own layout.)

Here's a basic overview:
- Obtain the necessary elements
- Determine the initial position of the sidebar upon page load
- Calculate #content.outerHeight()

With these variables set, during the window scroll event, check if we are either <= our original sidebarTop position or if we have surpassed the blogHeight. If either condition is met, remove the sticky class. Alternatively, if our scroll position is >= the original sidebar position, then add the .sticky class (which includes position: fixed).

Explore the JSFiddle (Click here)

The Javascript snippet is as follows:

// Store the fixed sidebar variables for scrolling functionality
var $sidebar = $('#sidebar-nav');

// Obtain and retain the initial position of #sidebar-nav for comparison
var sidebarTop = $sidebar.position().top;

// Adjust the `- 10` to control when it should disappear upon reaching the footer.
var blogHeight = $('#content').outerHeight() - 10;

// Bind the function below to the scroll event
$(window).scroll(fixSidebarOnScroll);

// The following function is called on window scroll (as bound above)
function fixSidebarOnScroll() {

    // Record our current scroll position
    var windowScrollTop = $(window).scrollTop();

    // Toggle the sticky class based on specific conditions
    if (windowScrollTop >= blogHeight || windowScrollTop <= sidebarTop) {
        $sidebar.removeClass('sticky');
    } else if (windowScrollTop >= sidebarTop) {
        if (!$sidebar.hasClass('sticky')) {
            $sidebar.addClass('sticky');
        }
    }
}

The HTML section:

<header>This is the header!</header>
<ul id="sidebar-nav" class="nav nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
</ul>
<div id="content">Content goes here. Scroll down to witness the sticky feature!</div>
<div class="clear"></div>
<div id="footer">This is the footer</div>

The CSS styles:

/* Fixate the navbar upon window scroll */
#sidebar-nav.sticky {position:fixed;top:5px;}

/* Additional styling for the HTML markup */
header {
    border:1px solid #aaa;
    background-color:yellow;
    margin-bottom:5px;
    height:50px;
}
#sidebar-nav {
    width:150px;
    border:1px solid #ddd;
    margin:0;
    padding:0;
    float:left;
}
#sidebar-nav li {
    list-style:none;
    border:1px solid #ddd;
    margin:10px;
    padding:2px;
}
#content {
    height:2000px;
    width:500px;
    padding:10px;
    border:1px solid #ddd;
    margin:0 0 10px 5px;
    float:right;
}
#footer {
    height:800px;
    border:1px solid green;
    background-color:#ddd;
}
.clear {
    clear:both;
}

:)

What is the best way to make a sticky floating sidebar that stays fixed while scrolling?

Answer №1

Similar questions

Displaying HTML5 video in Colorbox on an iPad device

What are the potential drawbacks of importing a namespace and a child module together? For example, using `import React, { Component } from ...`

Display the component once the useEffect has been updated in React JS

Using the Mongoose $or operator with a nested array in query conditions

Tips for incorporating Javascript in an innerHTML inline css situation

Leveraging the power of Angular.js to generate random user profiles

Utilizing inline keyboard markup callbacks for sending messages to channels via a Telegram bot

The header and footer are not extending across the entire width of the page

Plotting Data Points with Tags in React Native

Change the position of an HTML image when the window size is adjusted

Attempting to update information in JSON using AJAX and PHP

Discovering how to identify words separated by spaces within a full-text search query using regex in both PHP and JavaScript

What is the best way to set the length of an undefined item in an object to 0 in reactjs?

Convert the button element to an image

Can values be extracted from a JSON object that is saved in a separate JavaScript file?

I am looking to develop a unique event that can be triggered by any component and listened to by any other component within my Angular 7 application

Is there a way to display a vertical list in a horizontal orientation?

What is the best way to generate an array containing multiple arrays, each filled with dynamic Divs?

Using Rails and Haml to Implement Smooth Scrolling with Jquery and CoffeeScript

Scraping a JavaScript page using Python without requiring a browser installation