What is the best way to have one DIV that can be scrolled while keeping another DIV visible on the screen?

Below is my HTML setup where the left column contains scrollable content that loads as you reach the bottom of the page, while the right column will have varying amounts of content. I'm looking to keep the right column visible while scrolling through the left column without displaying any scroll bars on the left side.

The left column will always be longer than the right column.

 #wrap{
    width: 1000px;
}
.col{
    width: 400px;
    border: 1px solid #ccc;

}
#leftC{
    height: 2000px;
    margin-right: 20px;
    float: left;

}
#rightC{
    height: 500px;

}
#head{
    font-size: 30px;
    text-align: center;
    background: #ccc;
    margin-bottom: 10px;
}

#div2{
    width: 450px;
    overflow: hidden;
    float: right;
    position: relative;
}

</style>

<div id="wrap">
    <div id="head">Header</div>

    <div class="col" id="leftC">LEFT COLUMN</div>
    <div id="div2">
        <div class="col" id="rightC">RIGHT COLUMN</div>
    </div>
</div>
javascripthtmlcss

Answer №1

Give this a shot:

HTML

  <div id="scrollable">Scrollable content here</div>
  <div id="notScrollableContainer" class="boundariesNotScrollable">
  <div id="notScrollable" class="boundariesNotScrollable">
    Scrollable content here
    <div id="fixedElement"> Fixed text here</div>
  </div>
  <div id="scrollable">Scrollable content here</div>

CSS

*{
  box-sizing: border-box;
}
.fixedPosition{
  position: fixed !important;
}
.relativePosition{
  position: relative !important;
}
#scrollable{
  border: solid 1px black;
  position: relative;
  float: left;
  margin: 5px;
  padding: 2px;
}
#notScrollableContainer{
  position: relative;
  float: left;
  margin: 5px;
}
.boundariesNotScrollable{
  width: 30vw;
  height: 100%;
}
#notScrollable{
  margin: 0;
  padding: 0;
  border: solid 1px black;
  padding: 2px;
}
#fixedElement{
  background: yellow;
}

Javascript/JQuery

$(document).ready(function(){

var ns = $("#notScrollable");
ns.addClass("relativePosition");
var fixedHeight = $("#fixedElement").offset().top;
var nscHeight = $("#notScrollableContainer").offset().top;
$(document).scroll(function(){
  if ($(window).scrollTop() > fixedHeight) {
    ns.removeClass("relativePosition");
    ns.addClass("fixedPosition");
    var offset = (nscHeight-fixedHeight);
    $("#notScrollableContainer").css("margin-top", offset+"px");
  }else{
    ns.removeClass("fixedPosition");
    ns.addClass("relativePosition");
    $("#notScrollableContainer").css("margin-top", "5px");
  }
});
});

Answer №2

How about this?

<style>
#wrap{
width: 1000px;
}
.col{
width: 400px;
border: 1px solid #ccc;

}
#leftC{
height: 2000px;
margin-right: 20px;
float: left;

}
#rightC{
height: 500px;

}
#head{
font-size: 30px;
text-align: center;
background: #ccc;
margin-bottom: 10px;
}

#div2{
width: 450px;
overflow: hidden;
float: right;
position: relative;
}

#new_div2 {
    width: 200px;
    height: 200px;
    position: fixed;
    top: 25%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
}

</style>

<div id="wrap">
    <div id="head">Header</div>

    <div class="col" id="leftC">LEFT COLUMN
        <br>Content here goes on and on... 
        <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        
    </div>
    <div id="new_div2">
        <div class="col" id="rightC">RIGHT COLUMN <br>R data<br>R data<br>R data<br>R data<br>R data</div>
    </div>
</div>

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 to Retrieve Accurate User Identification - Making AJAX Requests

Currently, I am facing a bit of a dilemma. I have implemented 2 jQuery scripts to handle updating a simple database row based on user ID and session. This functionality allows users to send a "Gift" that adds value to their database row column "bonus". Wh ...

javascriptphpjquerymysqlajax

Invoke a function from a different source in JavaScript

Below is the JS function implemented: function addMemberToLessonDirect(id) { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } ...

javascriptjquerycall

How to center the navbar in Twitter Bootstrap when it switches to two rows in responsive mode

I am facing an issue with my navbar that has dropdowns. When the navbar is on a single row at full screen size, I have managed to center it. However, when the screen size is reduced and the navbar expands to two rows, neither row appears centered. How can ...

csstwitter-bootstrap

How to automatically generate a serial number using JavaScript each time a click event occurs

continuous problem with repeated serial numbers Serial number remains the same after each click $(document).on('click', '.menu-item', function() { var menu_id = $(this).attr('id'); var _token = $('input[name="_ ...

javascriptajax

Incorporate a particular video directly into HTML code

I'm having trouble embedding a video into my html web page. The video I want to use is located at . I tried using the following code snippet based on the source code of another page where the video is currently embedded: <embed height="100%" width ...

htmlvideo

Guide on using the react array map method to insert elements into a designated Id

Below is an example of an array containing IDs, items, and item notes descriptions. let sampleArr = [ { id:1, item:"item", notes:["one"] }, { id:2, item:"item2", notes:["one","two"] }, { id:3, item:"i ...

javascriptreactjsecmascript-6

Plotting Data Points with Tags in React Native

After doing some research, I came across a few React Native packages that offer scatter plots such as react-native-scatter-chart, react-native-chart-kit, and react-native-chartjs. However, I am interested in finding something more customizable. I'm s ...

javascriptreactjsreact-nativeplotscatter-plot

PHP Ajax Image Uploading and Storage

Is there a way to effortlessly upload an image and save it in the uploads folder without any page refresh? Not only that, but can we also have the uploaded image displayed on the screen within a designated div section? Unfortunately, I seem to encounter a ...

javascriptphphtmlajaxupload

Creating personalized hooks that rely on React query requests

Utilizing a series of custom hooks, I am able to fetch data and perform various calculations based on that data. One particular hook calculates the total amount that should be set aside monthly for future expenses, using the output from previous data-fetch ...

javascriptreactjsnext.jsreact-query

Generate HTML documentation from Matlab exports

I am seeking guidance on creating a comprehensive user manual for a Matlab toolbox that I have created. I recently discovered how to create custom documentation using a helptoc.xml file, but I am unsure of how to include the pages generated when using doc ...

htmlmatlabdocumentation

Is it possible for a prop to change dynamically?

I am currently developing a component that is responsible for receiving data through a prop, making modifications to that data, and then emitting it back to the parent (as well as watching for changes). Is it possible for a prop to be reactive? If not, wh ...

javascriptvue.jsvue-component

Issue with JavaScript and Phonegap on Android: screen.width is giving inconsistent and inaccurate values

Upon launching my Phonegap app on Android with the "deviceready" event, I am experiencing unusual behavior in terms of screen width values. Specifically, on a ZTE Blade device with a native 800px resolution, the screen.width returns false values such as 32 ...

javascriptandroidcsscordovawidth

Using web workers to streamline loading objects in Three.js

I need to figure out how to efficiently load and parse a large 3D file using three.js and its associated Loader like PLYLoader. The current issue is that the parsing process takes a significant amount of time, causing the JavaScript-based UI to freeze up. ...

javascriptthree.jsweb-worker

JavaScript Hangman Game Malfunctioning

I am in the process of creating a basic hangman game to be played on a web browser. Whenever the user clicks a button, it triggers a function called pickWord(): <button onclick="pickWord()" id="restart">Choose A Word</button> This functi ...

javascripthtml

Injecting a service into an Angular constant is a straightforward process that involves

Is it possible to define a constant that utilizes the $locale service? Since constants are objects, injecting them as parameters like in controllers is not an option. How can this be achieved? angular.module('app').constant('SOME_CONSTANT&a ...

javascriptangularjsdependency-injectionconstantsangularjs-service

Is it possible to utilize the Wicket:id for generating CSS?

Can the wicket:id attribute of an element or component be used for CSS styling instead of the "class" attribute? For example: .tooltipster-arrow span, .column-shifter { display: block; width: 0; height: 0; position: absolute; } Let&apos ...

javahtmlcsswicketstyling

Python AssertionError: The argument passed to the write() function in GAE must be a

Currently, I am utilizing Sublime Text 2 as my primary editor to develop a brand new Google App Engine project. UPDATE: While testing this code via localhost, I encountered an issue when accessing the app on appspot: Status: 500 Internal Server Error ...

htmlgoogle-app-enginepython-2.7

Exploring Nested Arrays through Iteration

I am currently dealing with a nested array structure. My goal is to iterate through the top-level array and retrieve the groupValue. Afterwards, for each group value, I need to loop through the docs array to obtain the title of each document. Example of N ...

javascriptarraysreactjsmultidimensional-array

Vue.js 2: Keep an eye on changes, but wait until after the initial data fetch

I recently entered the Vueverse (using Vue.js 2) and I'm encountering some challenges with the watch feature. When the component is mounted, I fetch data from an API and use it to set the value of a radio button. Essentially, I have two radio buttons ...

javascriptvue.jsvuejs2vuejs3

Logging into Facebook using the MEAN stack

Currently, I am in the process of deploying an application that utilizes the passport Facebook strategy. Initially, I tested the application on localhost and later attempted to deploy it on AWS. While everything appeared to be functioning correctly on my ...

javascriptangularjsnode.jsfacebookpassport.js