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:

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

Using Jquery fadeIn along with responsive CSS media queries

Issue at Hand: An issue arises with my navigation bar and text block animations. The fading effect applied on the text element causes inline styles to be added, thus disrupting the media query set to hide the text on smaller screens. If you disable the s ...

jquerycss

Sending an HTML form data to a Node.js server

I'm currently working on a simple project that involves creating a web form and sending it to node.js in order to save the information received. I've been following some YouTube tutorials (https://www.youtube.com/watch?v=rin7gb9kdpk), but I' ...

htmlnode.jsexpresshttppost

Issues arise when trying to integrate Bootstrap modal with bootcards

I am currently implementing a modal with bootstrap: <div class="modal" id="contact-update-view"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-head ...

htmlcsstwitter-bootstrapmodal-dialogz-index

How can I disable auto-fill for password input fields? Setting autocomplete="off" doesn't seem to be working

Hey there, I'm having some trouble with the autocomplete feature in Google Chrome. Can anyone suggest an alternative way to disable autocomplete for password fields? By the way, my project is using Vue.js. ...

javascripthtmlcssvue.js

Showing the json encoded array received from an ajax response

I have encountered this data result {"policy":[{"id":"1","policy_name":"Policy 1","description":"Testing","status":"Active","valid_until":"2022-05-18& ...

phphtmljqueryajaxcodeigniter

Steps to extract a hash from a document's URL

The following code is used: jQuery(document).ready(function() { console.log($(this)); }); After running this code, the object displayed in the console is: [Document mypage.html#weather] How can I retrieve the last ID from this object? In this ...

javascriptjqueryhtmlcss

Is there a way to adjust the brightness of specific sections within an image using html, css, and js?

I am working on a project where I have an image with tags underneath that correspond to different parts of the image. For example, if the image is of a dog, one of the tags could be 'nose', indicating the portion of the image around the dog' ...

javascripthtmlcssfrontend

How can I achieve a floating effect for a div element that is contained within another element?

I have a container located within the body of my webpage. This container has margins on the left and right, as well as a specified width. Inside this container, there is a div element that extends beyond the boundaries of the container to cover the entire ...

htmlcssweb

Is there a way to attach an event for multiple arithmetic operations to a checkbox?

My form includes 4 checkboxes for different mathematical operations. <form action="" method="POST"> Select number of questions: <input type="number" name="que" value="que"> <br> <br> Select number of series: <select name="sel ...

javascriptphpjqueryhtml

Manipulating certain attributes of a CSS class for a specific division element

I'm working with a div that has a CSS class applied to it. The class declares the height as x pixels, but I actually want my div to be y pixels high. Is there a way to override the height parameter of the CSS without making changes to the CSS file? ...

htmlcss

The <th> and <td> elements retrieved from the database do not align properly in their respective index positions

Hey fellow Developers, I'm currently working on a School Management System and I have two tables in the database - one for Subjects and another for storing scores obtained in those subjects, called 'scores'. My goal is to display subject nam ...

phphtmlmysqlpdo

Error code 102 appeared, stating: "The server has declined the connection attempt"

Recently, I successfully developed a Facebook application that mirrors the registration and sign-in features of my website. Users have the option to register or log in to my site through their Facebook accounts. To achieve this, I created a basic HTML page ...

htmlfacebookfacebook-graph-api

The class "Accordion" is not recognized by the local Bootstrap 5 installation

Currently, I am trying to implement a vertically collapsing Accordion using the Bootstrap 5 documentation found at https://getbootstrap.com/docs/5.0/components/accordion/ Even though I have installed the library with libman, Visual Studio 2019 is showing ...

cssvisual-studio-2019bootstrap-5libman

Styling code for a layout with two columns aligned to the left using

I am looking to create a layout where two pieces of text are displayed side by side in columns using CSS. The left-hand column will have variable length text, while the right-hand column will have fixed length text. The desired layout should show the two ...

htmlcsslayoutcss-floatmultiple-columns

Sorting through mongoose information on the front end using EJS depending on a dropdown pick

Beginner embarking on my inaugural project here. I have developed 2 Mongoose schematics and models for managing categories and products. The products are nested within the corresponding categories model. Using Node and Express, I successfully sent all ca ...

javascripthtmlexpressmongooseejs

What is the best way to specifically target and style a component with CSS in a React application?

I'm facing a small issue with the React modals from Bootstrap in my application. In index.html, I include the following: <link rel="stylesheet" href="/assets/css/bootstrap.min.css"> <link rel="stylesheet" href=& ...

javascriptcssreactjstwitter-bootstrap

Can one image impact other images through a wrapping function?

I am facing an issue with positioning 3 images independently from the window size using the position: relative declaration. When I try to define positions for the first 2 images and then insert the third one, it disrupts the position of the first two. Is ...

jqueryhtmlcss

Having an iframe at the bottom of the page is causing unnecessary white space below the

I currently have an iframe placed in the footer of my website. When I try to set the height of the iframe to match the height of the footer, it results in unwanted white space appearing below the iframe. The issue can be seen here: JSFiddle To fix this p ...

htmlcssiframe

modify the color of text in a row within a jquery ajax table

Is it possible to change the font color of values in a row based on a condition inside a function? Specifically, if the TotalStudent count exceeds the room capacity, can we add student information to the table with red font color? Below is my attempt using ...

javascriptjquerycssajax

Generate a list of users using Angular in an efficient manner

I am working on creating a user list similar to the image provided below. I am using Angular and Bootstrap for the basics of this project. However, my concern is how to efficiently handle a large number of users. If the user count exceeds 10k, what would b ...

angularjshtmltwitter-bootstrapmongodbexpress