Fixed positioning in child element while synchronizing the parent's horizontal scroll with the child element's left position

I have a div with relative positioning that scrolls horizontally.

Within this div, I want to include a fixed element that also scrolls along with the parent div but remains at the top because the parent div is a child of a vertically scrolling div.

To better explain my point, I have created a codesandbox: https://codesandbox.io/s/strange-browser-mydzm

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

The green div scrolls vertically, allowing both the red and blue divs to scroll simultaneously. The blue div can be scrolled horizontally while keeping the red div visible.

My goal is for the orange div (labeled RightPane) to scroll horizontally with the blue div, but remain fixed when the green div is scrolled vertically.

When setting the RightPane to positon: fixed without specifying a top property, it prevents vertical scrolling but also hinders horizontal scrolling.

Is there a way to achieve this using CSS alone?

htmlcssreactjs

Answer №1

It may not be possible to achieve the exact outcome you desire, but I came pretty close by utilizing position:sticky for both the right panel and the orange title.

You can see if this approach works for your needs with some tweaks:

https://example.com/s/awesome-jackson-fdpqz

.App {
  position: relative;
  ...
}

.leftPanel {
  width: 30%;
  z-index: 1;
  position: sticky;
  left: 0px;
  float: left;
  ...
}

.rightPanel {
  height: 100%;
  margin-left: calc(30% + 20px);
  position: relative;
  ...
}

.fixedPanel {
  position: sticky;
  ...
}

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

Tips for displaying a 404 error when a page is not found on a server using nginx with react.js

I am currently utilizing nginx along with react.js and have encountered an issue with handling 404 errors. I have found that using the method try_files $uri /index.html; works successfully to some extent. However, whenever a direct URL is accessed or the p ...

reactjshttpnginxhttp-status-code-404

A method for positioning each pair of <li> elements side by side

My goal is to arrange every pair of li elements next to each other (e.g. 0-9, A-B, C-D, ...). Currently, they are aligned one by one. <ul> <li class="alphabetRow"><a href="#" id="alpha_1" class="alphabet active" >0-9</a></li ...

htmlcss

Unlocking the potential of data inputted in a JQuery Autocomplete form

Seeking assistance with extracting data from a form to utilize for additional purposes <form onsubmit="return false;"> Enter a School: <input id="schoolsearch" type="text" /> <INPUT TYPE=SUBMIT VALUE="GO"> </form> I am struggling ...

phpjqueryhtmlformsautocomplete

React: Unexpected behavior when modifying a variable's state using post-increment

When I utilize the post-increment operator to change the state variable, the count variable retains its old value... Allow me to illustrate this with an example app: When I click the button with the following code, the app displays the following sequenc ...

javascriptreactjsreact-nativereact-hooksjsx

The jQuery UI accordion fails to function properly after refreshing the data

I am facing an issue with my HTML page where data is loaded dynamically into accordions. The accordion functionality is implemented inside a function, which is called at regular intervals to refresh the data. Initially, the accordion displays correctly, bu ...

javascriptjqueryhtmljquery-ui

Ways to achieve a blurred background effect on the body using CSS

I've been experimenting with setting a background color using linear gradient, but now I want to add a blur effect to it. I've tried various codes but haven't had any success so far. Here is the CSS code I have been working on: body{ ...

css

The function .innerHTML is not functioning correctly, at least in my opinion

When I utilize .innerHTML to insert text into a textarea, the script stops functioning if I manually begin editing the text in the textarea. Here is the code snippet: (function($){ addPort = function(name) { switch(name) { case 'name1': ...

javascripthtml

What is the method for deploying a website with parcel on Heroku?

I am encountering an error while trying to deploy a website on Heroku that was created using MERN and built with parcel. The error is preventing me from successfully deploying it on Heroku. How can I resolve this issue? Here Package.json { "name": "T ...

reactjsherokumernparcelparceljs

What is the best way to watch a video file (.flv) without the distracting loading image appearing as it buffers during playback

I am looking to incorporate an FLV video file into my website. It is important to me that the video begins playing smoothly, taking into account the internet speed of the user's device. I want to ensure that the video does not pause to buffer, display ...

htmlflvstreaming-flv-video

Is there a way to ensure that the text stays positioned behind the initial image even as the window size is adjusted

<html> <head> <title> Example </title> <style> img:hover {opacity : 0.3;} img {z-index : 1; height : 33%; width : 33%; } .first { position : absolute; top: 0%; left: 0%;} .second {position : absolute; top: 0%; left: 33%; ...

htmlcss

Transforming an ES6 JSON object into a dictionary: a step-by-step guide

As someone who is new to learning ES6 and JQuery, please forgive me if this question has been asked before (I couldn't find similar ones). Currently, I am working on retrieving data from a JSON file in the following format: { EUR: { code: "EUR" ...

javascriptjqueryjsonajaxreactjs

What is the best API for incorporating interactive maps into my Android application?

I am looking to create an Android app (using Java) with interactive maps similar to ammaps, which can be integrated with HTML5/jQuery Mobile. Check out for reference. The app will display a world map where different areas are highlighted or colored based ...

androidjqueryhtmlgoogle-maps

Struggling to position the newest messages at the bottom of the list

I'm working on creating a web chat system similar to IRC where the latest messages should always be at the bottom of the chat window. Below is my attempt, but unfortunately it's not working as expected: ...

htmlcsschat

What is the best way to adjust a Checklist's width to match the width of its parent Dropdown in Dash Plotly?

At the moment, I am facing an issue with setting the width of a checklist from Dash Core Components to match the width of the dropdown menu it is placed in. Here's a glimpse of how it appears currently: https://i.sstatic.net/mjzAd.png Below is the P ...

pythoncssplotly-dashbootstrap-5

react.js function that returns 'undefined'

Having trouble with my class function that returns undefined when I try to use the return value. Main.js: let db = new Database() let username = db.get() return( //returns undefined <p>{username}</p> ) database.js: class Database { [... ...

javascriptnode.jsreactjsnpm

Employing "npm install" to set up the development environment within Docker

Currently, I am working on a ReactJS project using Docker for development purposes and will be collaborated on by a team. I am encountering some difficulties understanding the process because I want to share my 'app' directory as a volume into t ...

node.jsreactjsdocker

How can I align the tags properly when inserting a tab box within a section tag?

How can I successfully insert a tab box within my section tag? I found this tab box tutorial on the website here The download link for the source code is available here: source code Below is the HTML code snippet: <!DOCTYPE html> <html> & ...

javascriptjqueryhtmlcss

Customizing CSS according to specific URLs

I have two different domains - one ending with .nl and the other ending with .be. For instance, domain.nl and domain.be. Both domains share a similar overall style, but I want certain elements to have distinct styling depending on whether it is the .nl o ...

javascriptcssurl

Is there a way to update a div element with an image without having to refresh

Currently working on a project for my studies where I am reading the x and y coordinates from a touch pad and drawing it in real time using PHP. I have created a draw page that takes these coordinates and displays them on an image, which is then shown on ...

phpjavascripthtml

When utilizing React Context, NextJS does not transmit pre-rendered HTML as the page source

I've been encountering a problem with utilizing Context in NextJS. Upon inspecting the page source, I noticed that there is no pre-rendered HTML visible. Specifically, I am unable to find any pre-rendered data following this tag - Currently, here is ...

reactjsnext.jsserver-side-renderingreact-contextredux-persist