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

Tips for automatically adjusting a vertical side bar to fit between the browser's header and bottom

Struggling with the installation of SimpLESS

Adjusting the size of content tags depending on their popularity

Play framework fails to apply style attributes correctly

Learn how to utilize AngularJS Material to toggle the enable/disable functionality of a checkbox

Tips for updating the class of a button upon clicking it

Creating a tabular layout using div elements and CSS styling

Ways to adjust the ngx-pagination color scheme?

Place an element in a higher position than a slideshow

Creating two columns with separate scrollbars in Responsive Bootstrap is a useful feature for organizing content in a visually

What could be causing the image URL to not function properly in the CSS file?

Aligning Content in the Center of a CSS Grid

The page fades in as soon as it is loaded thanks to the "

Ways to showcase the outcome of a spin after each rotation

What could be causing my sticky positioning to not function properly when I scroll outside of the designated

Trigger a series of functions upon clicking with ReactJS

Identifier for md-radio-group

What is the reason for the disparity between CSS box-sizing content-box and border-box?

How come ng-class doesn't apply to a specific class name?

Variations in CSS display across various browsers