Maintain the scrollable feature of the element until the final content is reached

I'm struggling to come up with the right keywords to search for my issue. I've tried using Google, but it seems my search terms are not effective.

The problem I'm facing involves two relative div elements with dynamic content. This means that the height of these elements is variable and they can be scrolled through. Let's say the first div has a class name of l-content, representing Left Content, and the second div has a class name of r-content, standing for Right Content.

The l-content will have more content than the r-content, but both will be scrollable when the screen size is not large enough to display all the content.

What I want to achieve is for the scrolling in the r-content to stop once it reaches the end of its content, allowing only the l-content to continue scrolling.

An example of this behavior can be seen on Facebook where elements like ads and recommendations appear on the right side. When the last element is reached, it appears to fix its position. I am unsure if this is achieved through fixing or another method, but I would like my r-content to exhibit similar behavior without knowing how to implement it.

Currently, this is what I have coded. Please note that Bootstrap is being used:

CSS

h1 {
    font-family: sans-serif;
    color: #FFF;
    letter-spacing: 2px;
    font-weight: 300;
}
.l-content, .r-content {
    display: table;
    float: left;
    margin-bottom: 8px;
    text-align: center;
    padding: 20px;
}
.l-content {
    width: 800px;
    height: 2000px;
    background: #E04C4E;
    margin-right: 8px;
}
.r-content {
    width: 430px;
    height: 1000px;
    background: #5996BC;
}

HTML

<!--LEFT CONTENT-->
<div class="col-lg-8 l-content">
  <h1>Left Content with Continue Scrolling.</h1>
</div>

<!--RIGHT CONTENT-->
<div class="col-lg-4 r-content">
  <h1>Right Content with Continue Scrolling but scrolling will stop when last content is reached.</h1>
</div>

I am unsure if JavaScript is needed to achieve this effect.

Thank you in advance for any assistance provided.

javascriptcsshtmltwitter-bootstrap

Answer №1

To achieve the desired effect, JavaScript and jQuery are essential tools to use in this situation.

For this particular task, scroll() and scrollTop() functions play a crucial role:

var height = $(content-above).height();
var sticky = $('#your-sticky-element');

$(window).scroll(function(){ 
  if($(window).scrollTop() <= height){
    $(sticky).css({
     'position':'fixed',
     'top':'0px'
    });
  } else {
    $(sticky).css({
     'position':'initial'
    });
  }
}

This solution is most effective when dealing with static content above the sticky element. If the content's height is dynamically changing, it will require frequent recalculations to keep the element in place.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A comprehensive guide on extracting attachments and inline images from EML files and transforming them into HTML format

Our challenge is parsing .EML files to display full emails with inline images and attachments on a webpage. We have successfully extracted the HTML body using MimeKIT for .net, but we are unsure of how to distinguish between inline images and regular email ...

javascriptnpmspfxmimekiteml

Tips for choosing multiple files with the Ctrl key in a list item element:

We have decided to create our own browsing functionality due to the limitations of the existing HTML browse feature. While using the HTML browse, we can only select multiple files by pressing the Ctrl key, and we want to replicate this feature in our custo ...

javascripthtmlangularjs

Should each HTTP request in a Node web app open a separate MongoDB connection?

I've integrated MongoDB into my Express.js Node web app. Here's what I have so far: // in app.js var mongodb = require('mongodb'); var mongourl = /* ... */; // These are just examples: app.get('/write', function (req, res) ...

javascriptnode.jsmongodbexpress

States are consistently maintained in React and do not impact the rendering process

I am keeping track of a state value by declaring it like this: const [count, setCount] = useState(0); To increment the count: const incrementCount = () => { setCount(count + 1); } I use this function in a loop to iterate through an array, exec ...

javascriptreactjstypescript

To clear the previous result of an AJAX call in JavaScript, reset the function or variable

I encountered a problem previously, and now another issue has come up. It appears that the previous result from my ajax JavaScript is still being displayed, and I need to prevent that from happening. I've tried deleting the variable, setting it to und ...

javascriptphpjqueryajax

How to send arrays through JSON?

I have some PHP code: $ids = array(1,2,3); $names = array("cat","elephant","cow"); $originalSettings = array ('ids'=>$ids,'names'=>$names); $jsonSettings = json_encode($originalSettings); echo $jsonSettings; Here ...

phpjavascriptjqueryjson

Switch tab colors when clicked

I'm encountering an issue with two tabs in bootstrap. My goal is for the tab color to change from black to yellow when pressed. I have attached 2 screenshots showing the code and design. Thank you. Second ...

htmlcssbootstrap-4

Filtering records by a joined association in Rails using Ajax

My goal is to enable an end user to filter a data grid based on an associated record. The data grid currently displays a list of Activities: The model for activity.rb (the list of records) class Activity < ApplicationRecord belongs_to :student ...

javascriptruby-on-railsajaxruby-on-rails-4

What is the best way to incorporate a JavaScript file into my ejs file using node.js?

As I work on creating a website for my school project, I encountered a challenge involving including CSS files in node.js. Thankfully, after researching on stackoverflow, I was able to find a solution. Now, I am facing another issue - how to include a java ...

javascriptnode.jsexpressnpm

What is the best method for transferring properties to the parent component using Vue router?

I have a multi-step form that each step has a different header structure. The only variation in the header among the steps is the wording, which changes as you progress through the steps. I am looking for a way to achieve this using Vue Router: pa ...

javascriptvue.jsvue-router

What is the best way to add additional buttons to my React App after the initial button has been clicked?

Currently, I am in the process of developing a CSV file loader that converts data into JSON format. The loader will consist of three buttons: 1. The first button allows me to select a file from my computer and load the CSV data for conversion to JSON. 2. ...

javascriptjsonreactjsapi

The functionality of item.classList.toggle() in HTML+CSS+JS fails to execute

I have been working on a program that aims to flip a card when it is clicked. The JavaScript code I have written for this functionality is as follows: /* Card flipping onclick */ import "./Stylesheets/FlipCardStyle.css" var cards = document.quer ...

javascripthtmlcssfrontendcard

Incorporate image into Vue.js form along with other information

I have been successfully sending the content of multiple fields in a form to the Database. Now I am looking to add an additional field for uploading images/files and including it with the other form fields, but I am unsure about how to accomplish this task ...

javascriptphpvue.js

"Implementation of Google+ button causing the appearance of a horizontal scrollbar

Adding Facebook and Twitter sharing buttons was easy, but now I'm having trouble with Google+. No matter where I place the code on my page (using a Bootstrap grid), it always adds 2-3 pixels on the right side, creating a horizontal scrollbar: <div ...

javascripthtmlcsstwitter-bootstrapgoogle-plus-one

Retrieve information from various MongoDB collections

Greetings! I currently have a database with the following collections: db={ "category": [ { "_id": 1, "item": "Cat A", }, { "_id": 2, "item": "Cat B" ...

javascriptnode.jstypescriptmongodbexpress

Elements vanish when SHAKE effect is in use

I've been experimenting with this framework and I'm struggling to get the shaking effect to work properly. Whenever I hover over an element, other divs seem to disappear. I tried using different versions of JQuery and JQuery UI on JSFiddle, and i ...

javascriptjqueryhtmlcssjquery-ui

What is the distinction between declaring a variable as var $a=$() versus var a?

In some cases, in JQuery we assign a variable like var $a=$(), resembling the declaration of a function. I am curious to know if there is any difference if we simply define the variable as var a? ...

javascriptjquerycoding-style

Is there a way to calculate the height of a component that is only rendered conditionally?

I have a scenario where I need to dynamically adjust the height of a component that is conditionally rendered without explicitly setting it. The height should automatically match the size of its content. To achieve this, I am using a reference to determin ...

javascripthtmlreactjsstateref

Bootstrap: Troubleshooting Margin Problems

I am currently utilizing the Bootstrap sb admin template. I attempted to include 3 columns in a row, but encountered the issue of them being merged together with no space around them. I experimented by modifying the Bootstrap file through a CDN link and pr ...

htmltwitter-bootstrapcss

RXJS buffering with intermittent intervals

Situation: I am receiving audio data as an array and need to play it in sequence. The data is coming in continuously, so I am using an observable to handle it. Since the data arrives faster than it can be played, I want to use a buffer to store the data w ...

javascriptangularaudiorxjs