Enable a single column to scroll until the content is fully displayed, and then stay in a fixed position

My HTML content consists of two columns, with the first column being a sidebar that should have limited content. The second column holds the main content and can span several pages.

The desired functionality is for the first column to scroll until the end of its content is visible when scrolling down, at which point it should remain fixed in place. The second column should continue to scroll normally. Both columns should move together, not independently.

I attempted using CSS properties like position:fixed and overflow-y:auto, but didn't get the expected results. You can see my attempt on this jsFiddle link: http://jsfiddle.net/a1qn17gw/1/

.fixed-content {
        position: fixed;
        overflow-y: auto;
    }

To visualize, I want the page to behave as shown below while scrolling:

https://i.sstatic.net/bWLAb.png

htmlcss

Answer №1

After reviewing your requirements, I have developed the following code that incorporates changes to the positioning and integrates jQuery for monitoring the window scroll event.

$(window).bind('scroll', function () {
var windowScrollHeight = $(window).scrollTop()
var scrollPlusWindowHeight = $(window).scrollTop() + $(window).height();
    var fixedContentHeight = $(".fixed-content").height();
    if(scrollPlusWindowHeight > fixedContentHeight){
     $(".fixed-content").addClass("fixed");
     }else{
     $(".fixed-content").removeClass("fixed");
     }
});
.fixed-content {
  position: absolute;
  width: 250px;
  color: red;
}
.fixed {
    position:fixed;
    bottom:0;
}
body{
  margin:0px;
  height:100%;
  width:100%;
}

.scrollable-content {
  position: absolute;
  margin-left: 300px;
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clearfix">
<div class="fixed-content">
Afghanistan<br>
Albania<br>
...
... (Continuing list of country names)
...
Vietnam<br>
Yemen<br>
Zambia<br>
Zimbabwe<br>
</div>
</div>

Answer №2

I believe this solution will be beneficial to you

Styling with CSS

.static-box {
    position: static;
    overflow-x: hidden;
    width: 200px;
    color: blue;
    height: 80vh;
}

Implementing Jquery

$(document).ready(function() {
    $(window).scroll(function() {
        $('.static-box').scrollTop($(this).scrollTop());
    });
});

Ensure that you have included the jquery library for it to work correctly

Answer №3

What is your end goal at the moment?

.scrolling-element {position:fixed; top:0; left:0; width:25%; height:100%; overflow:auto;}

Answer №4

I have discovered a CSS-only solution to this issue! It is much more straightforward compared to other suggested approaches.

The secret lies in applying position: sticky; to the .fixed-content column and making it "stick" to the bottom. It's crucial to note that setting margin-top: auto is essential here, ensuring that the sticky element starts at the bottom of the column by default.

.container {
  display: flex;
}

.fixed-content {
  bottom: 0px;
  display: flex;
  flex: 1;
  margin-top: auto;
  position: sticky;
}

.scrollable-content {
  flex: 1;
}
<section class="container">
<div class="fixed-content">
Afghanistan<br>
Albania<br>
Algeria<br>
Andorra<br>
Angola<br>
Antigua & Deps<br>
Argentina<br>
Armenia<br>
Australia<br>
Austria<br>
Azerbaijan<br>
Bahamas<br>
Bahrain<br>
Bangladesh<br>
Barbados<br>
Belarus<br>
Belgium<br>
... (truncated for brevity) ...</div>
<div class="scrollable-content">
Iran<br>
Iraq<br>
Ireland {Republic}<br>
Israel<br>
Italy<br>
Ivory Coast<br>
Jamaica<br>
Japan<br>
Jordan<br>
Kazakhstan<br>
Kenya<br>
Kiribati<br>
Korea North<br>
Korea South<br>
Kosovo<br>
... (truncated for brevity) ...
Zambia<br>
Zimbabwe<br>
</div>
</section>

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

Looking to update the background color of a div every 3 seconds?

Every 3 seconds, I need to change the background color of each div. To do this, I attempted to modify the values in the color array every 3 seconds. For example, the value at index 0 (which is "red") would move to index 1, then the value at index 1 would ...

javascriptjqueryhtmlcss

The issue arises from the fact that the Bootstrap modal fails to open automatically

Having trouble getting my bootstrap modal to open on page load, even though the button to trigger it is working fine. Here is my code: <div id="myModal" class="modal fade" role="dialog"> <div class=" ...

javascripthtmlcssbootstrap-4bootstrap-modal

Using the power of Selenium's XPath, we can easily navigate through a table to access

Looking for assistance in creating selenium xpath for the various column links within a table. Each row has a unique identifier and contains information about a product, including the name. Based on the product name, I need to locate other links within the ...

cssxpathselenium

The HTML table is displaying with an offset, which is probably caused by the *ngFor directive

I'm having trouble aligning the HTML table properly, as it seems to be misaligned. The issue I am facing is related to the inner loop (modification) which is a list inside of Revision (basically, Revision 'has a' modification list). Althoug ...

htmlangulartypescript

Unforeseen outcomes when setting background colors with Anime.js

I've recently started experimenting with Anime.js. I have a piece of code that I'm using to animate a div element with an id of a. anime({ targets: "#a", translateX: 250, color: "#fff", backgroundColor: "hsl(200, 50%, 50%)", ...

javascriptcssanimation

Extracting names from HTML can be done easily by looking for the "@" symbol that the

My HTML structure looks like this: <table id="table-15244" cellspacing="0" class="comment"><tbody> <tr id="comment-37"> <td style="color: #999" class="NV"> </td> <td class="hidden-mob"> ...

javascriptjqueryhtmlcss

Issue with dropdown menu display in Internet Explorer

Having trouble with a CSS dropdown menu displaying incorrectly in IE, while working fine on other browsers. <body> <div id="container"> <header> <div id="hlogo"> <a href="index.html">title ...

htmlcssinternet-explorer

What is the best way to add padding to both the TextField input and label components within Material UI?

Recently, I've integrated Material UI into my project and set up a TextField for a form field. However, I'm facing an issue where applying padding to the input field doesn't affect the label as well. <TextField sx={{ display: &q ...

cssreactjsnext.jsmaterial-uimaterial-design

Can a local HTML page be embedded within another?

Suppose I have two HTML pages: index.html and embed.html. Within embed.html, there is an arbitrary HTML page that I want to embed inside index.html. I attempted the following: <!DOCTYPE html> <html lang="en"> <head> <me ...

htmlcssiframe

Issues with PHP code not displaying properly in HTML email design

I am struggling to understand why some of my PHP code is not rendering correctly in an HTML email that I am working on. The following is an excerpt from the code (with most of the HTML elements removed): $messaget = " <html> <head> <title&g ...

phphtmlemail

What is the method for utilizing the variable from express in HTML?

Currently, I am working with Express and have the following code: app.get('/', requiresAuth(), (req, res) => res.sendFile('/db_auth_site/index.html', { title: 'Hey', message: 'Hello there!' }) ); I am trying ...

htmlnode.jsexpressnodejs-server

The download attribute in HTML5 seems to be malfunctioning when encountering a 301 Moved Permanently

I am attempting to create an automatic download feature for a file from a URL with a 301 Moved Permanently redirection. Here is the current code: <a href="myserverapi/download?fileId=123" download="image.jpg" target="_blank" ...

javascripthtml

Interactive YouTube video in a responsive classroom environment

Hello! I have a website at bit.ly/1EfgOsM and I am trying to align the video box with a YouTube video next to an image box. The width of the image box is set to 40%, so I want the video box to also be responsive with a width of 40%. The video box is in a s ...

htmlcssyoutuberesponsive-design

What is the best way to swap out an HTML file with another without altering the link?

I'm working on an HTML file, which is basically a webpage. My goal is to create a functionality where clicking a button will dynamically replace the content of the page with another HTML file, complete with its own CSS, JavaScript functions, and other ...

javascripthtml

Troubleshooting: Why isn't my CSS fixed position working for my sticky

I have a simple jQuery code snippet that is supposed to make the navigation element sticky by applying a class with position: fixed. However, I'm facing an issue on my Commerce platform where the fixed position property doesn't seem to work corre ...

javascriptjqueryhtmlcss

Jquery adds a fun, wobbly effect to animations

I'm experiencing an issue with the animation I've implemented causing some slight shaking and wobbling of the text and certain elements which is affecting the overall look. You can view a live example of this behavior here: This problem specific ...

javascriptjqueryhtmlcss

Creating a box that is connected by lines using JSON data requires several steps. You

I am attempting to dynamically draw a line using the provided JSON data. I have heard that this can be easily achieved with flexbox. Important: I would greatly appreciate a solution involving flexbox This is what I hope to achieve: https://i.stack.imgu ...

javascriptjqueryhtmlcss

Guide to incorporating vertical scrolling for a grid of items in Material UI

Is there a way to implement vertical scrolling in a grid container so that when the height of components exceeds a certain maximum, they can be scrolled through vertically? ...

cssreactjsscrollmaterial-ui

Ignoring CSS transitions by changing the width property in JavaScript’s element.style

When attempting to create a smooth progress bar animation by adjusting the width using document.querySelector('#mydiv').style.width = '20%', I noticed that the new width is updated instantly rather than transitioning smoothly. It seems ...

javascriptcss

Creating a versatile PHP script capable of managing multiple forms

Each time I develop a website for a client, I find myself in the same cycle of writing form HTML and then creating a PHP script to manage the data. Dealing with lengthy forms or multiple forms can make the process messy. Before diving into crafting a dyna ...

phpjqueryhtmlajaxforms