Maintaining fixed panels as you scroll through a centrally aligned layout

Question

Maintaining fixed panels as you scroll through a centrally aligned layout

I am looking to create a layout with three divs set up as columns. The outer two will be for navigation and need to stay in place while the user scrolls, but the middle section will contain content that should scroll normally along with the page.

I know typically you would use position:fixed for this, but I also want the entire design to be centered on the page. Using fixed positioning would prevent it from moving horizontally in a centered layout. Does anyone have any suggestions on how to achieve this?

I have created a jsfiddle to kickstart the process: http://jsfiddle.net/8RqEt/

css

Answer 1

Answer №1

To center elements, use the CSS property

position:fixed; left: 50%; margin-left: ??px

on the outer elements:

For an example, check out this link: http://jsfiddle.net/M5X7q/

left: 50% centers the left edge of each element to the page. See it in action here: http://jsfiddle.net/M5X7q/1/
Adjusting the margin-left then places each element in its correct position.

Answer 2

To center elements, use the CSS property

position:fixed; left: 50%; margin-left: ??px

on the outer elements:

For an example, check out this link: http://jsfiddle.net/M5X7q/

left: 50% centers the left edge of each element to the page. See it in action here: http://jsfiddle.net/M5X7q/1/
Adjusting the margin-left then places each element in its correct position.

Answer 3

Answer №2

While you already have your solution, I thought of enhancing my answer for others seeking a similar fix.

How about trying this approach:

http://jsfiddle.net/M5X7q/6/

This code snippet smoothly scrolls the middle section, corrects the blues, activates the scrollbars, and minimizes the flickering issue observed in the fiddle before your last update.

The implementation utilizes a jquery plugin solution (which I tweaked to suit this scenario). It requires minimal javascript to achieve the desired outcome.

Usage example:

$(document).ready(function() {
    $('.blue-1').scrollToFixed();
    $('.blue-2').scrollToFixed();
});

Below is a link to the plugin along with its source code:

https://github.com/bigspotteddog/ScrollToFixed

Answer 4

While you already have your solution, I thought of enhancing my answer for others seeking a similar fix.

How about trying this approach:

http://jsfiddle.net/M5X7q/6/

This code snippet smoothly scrolls the middle section, corrects the blues, activates the scrollbars, and minimizes the flickering issue observed in the fiddle before your last update.

The implementation utilizes a jquery plugin solution (which I tweaked to suit this scenario). It requires minimal javascript to achieve the desired outcome.

Usage example:

$(document).ready(function() {
    $('.blue-1').scrollToFixed();
    $('.blue-2').scrollToFixed();
});

Below is a link to the plugin along with its source code:

https://github.com/bigspotteddog/ScrollToFixed

Maintaining fixed panels as you scroll through a centrally aligned layout

Answer №1

Answer №2

Similar questions

Does the CSS overflow property affect the borders of an element?

The Tailwind preset is generating CSS code, but the webpage is not displaying the intended styles

Customize the Width of DropDown List Items with Razor

Show MaterialUI Dialog in fullscreen mode

Checkbox option to change background color of table cell

How can ListSubheader in Material-UI be customized to match the style of iOS UITableView?

What could be causing the no-repeat functionality to fail on these background images, and what steps can be taken to prevent the list text from overlapping with the image?

Divs are being obstructed by the navigation bar

How can you implement CSS styling for Next.js HTML during server-side rendering?

Arranging pictures in both vertical and horizontal alignment (CSS)

Stop Bootstrap from impacting a specific division on my webpage

Angular Placeholder Positioned at the Top

Troubleshooting problem with CSS alignment within Bootstrap framework

Easy steps to eliminate background color from text

What is the best way to ensure that two divs in the same row float in opposite directions?

Paths to External Stylesheets

Ways to create a self-contained video viewer

What steps can be taken to create a curved bottom for the header section?

Make the text area occupy the full width of the remaining screen space

Clarification: Javascript to Toggle Visibility of Divs