How to make a sticky sidebar using JavaScript or jQuery

Question

How to make a sticky sidebar using JavaScript or jQuery

Hello everyone! I am just starting out in front end web development, so please bear with me if my question seems basic. I am trying to figure out how to create a sticky sidebar that only appears when the parent div is in view, and disappears when it's not. If you've seen how CSS Tricks implements sticky ads on the right side, that's the effect I'm going for. Check out the image below for reference: Image here

The catch is that I can't use position:sticky or position:fixed in css due to browser compatibility issues, particularly with Internet Explorer. Additionally, I don't want the sidebar to be fixed on the screen at all times, just until the end of its parent.

To clarify, I want the sidebar to only appear when the div enters the viewport, rather than being fixed throughout the entire page.

Here is the layout structure I am working with:

<div class="section">
  <div class="sidebar left">
    Sidebar
  </div>
  <div class="content">
    Text here
  </div>
</div>
Further content here...

Thank you in advance for your help! :)

javascript html jquery css viewport

Answer 1

Answer №1

I can't rely on CSS for browser compatibility.

You absolutely can and should. position: fixed is widely supported by all major browsers. Check out the details here.

Here's a simple example below:

<div class="side-bar">Your content</div>

.side-bar {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  max-width: 100vw; /* ensure it stays within screen width */
}

Answer 2

I can't rely on CSS for browser compatibility.

You absolutely can and should. position: fixed is widely supported by all major browsers. Check out the details here.

Here's a simple example below:

<div class="side-bar">Your content</div>

.side-bar {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  max-width: 100vw; /* ensure it stays within screen width */
}

Answer 3

Answer №2

To start, assign a hidden class to the div element in order to hide it. Insert this snippet into your CSS stylesheet:

.hidden {
    display: none;
}

Your HTML file should resemble the following structure:

<div class="div1">Some content</div>
<div class="div2 hidden">Some other content</div>

Next, utilize the IntersectionObserver API within your javascript script as shown below:

const div1 = document.querySelector('.div1');   // Reference to the top div

const div2 = document.querySelector('.div2');   // Reference to the bottom div

const observerCallback = function (entries) {
   if (!entries[0].isIntersecting) div2.classList.remove('hidden');
   else div2.classList.add('hidden');
}

const observerOptions = { root: null, threshold: 0};

const observer = new IntersectionObserver(observerCallback, observerOptions);
observer.observe(div1);

The above codes are used to target the two div elements:

const div1 = document.querySelector('.div1');

const div2 = document.querySelector('.div2');

Lastly, set up an IntersectionObserver to monitor changes on the div1 element:

const observer = new IntersectionObserver(observerCallback, observerOptions);
observer.observe(div1);

Answer 4

To start, assign a hidden class to the div element in order to hide it. Insert this snippet into your CSS stylesheet:

.hidden {
    display: none;
}

Your HTML file should resemble the following structure:

<div class="div1">Some content</div>
<div class="div2 hidden">Some other content</div>

Next, utilize the IntersectionObserver API within your javascript script as shown below:

const div1 = document.querySelector('.div1');   // Reference to the top div

const div2 = document.querySelector('.div2');   // Reference to the bottom div

const observerCallback = function (entries) {
   if (!entries[0].isIntersecting) div2.classList.remove('hidden');
   else div2.classList.add('hidden');
}

const observerOptions = { root: null, threshold: 0};

const observer = new IntersectionObserver(observerCallback, observerOptions);
observer.observe(div1);

The above codes are used to target the two div elements:

const div1 = document.querySelector('.div1');

const div2 = document.querySelector('.div2');

Lastly, set up an IntersectionObserver to monitor changes on the div1 element:

const observer = new IntersectionObserver(observerCallback, observerOptions);
observer.observe(div1);

How to make a sticky sidebar using JavaScript or jQuery

Answer №1

Answer №2

Similar questions

Issue with Bootstrap's pull-right class causing elements to overlap

creating a custom website layout

Ensuring the correct width for a .png image in an email newsletter for Outlook 2013

When floating a heading 4 (h4) and two divs to the left, and a single div to the right,

Using Jquery for a Second Timer

What steps should be taken to incorporate a user input space similar to the one found in the Wordpress new post section

Having trouble with Vue.js 2.5+ and Webpack 4+ not loading CSS files?

Attempting to route a selector, yet on the second attempt, the entity is successfully transferred

The background image is not displaying correctly in the tag td

Chrome reports a Javascript error: indicating that it is not recognizing the function

Angular navigation bar dropdown menu is not displaying properly

React array fails to update upon modification

Three.js is failing to render within a specified div

What are the steps for designing a flexbox structure?

What is the best way to send back the response from my Node controller to my application using AJAX?

Tips on how to connect with ngFor

The custom bullet points are not appearing correctly

Exploring JavaScript capabilities with Google - managing and updating object names with numbers

Is it possible to utilize a hyphen in the link_to attribute?

The download functionality in HTML5 is not functioning properly, so users are forced to rename files when downloading