Vertically centered sidebar now stationary

Question

Vertically centered sidebar now stationary

I'm looking to create a website with a fixed sidebar positioned at the center of the screen on the left-hand side. I want it to remain vertically centered even when the page is scrolled.

Is there a way to achieve this effect using pure CSS/HTML?

I've considered updating the sidebar's position on scroll, but I'm concerned about potential flickering caused by constant updates to its top position in the CSS. Are there any alternative solutions available? Ideally, I'd like to stick to CSS alone, but I'm open to utilizing jQuery if it can deliver the functionality I need.

javascript jquery html css

Answer 1

Answer №1

To ensure it stays in place, consider including position: fixed; in the CSS code.

Answer 2

To ensure it stays in place, consider including position: fixed; in the CSS code.

Answer 3

Answer №2

Here is the solution you've been searching for. It's important to keep in mind that mobile browsers tend to disregard the position:fixed property, so you'll need to incorporate some JavaScript to ensure it works properly on those devices. Be sure to set the container's minimum height to 200px.

#sidebar
{
    height: 200px;
    position: fixed;    /* Keeps element in place when scrolling */
    top: 50%;       /* Moves down 50% from top of container */
    margin-top: -100px; /* Adjusts back up half the height of this element */
}

#container
{
    min-height: 200px;
    _height: 200px; /* Specifies height for IE6 since it treats height as min-height unless overflow is hidden */
}

Answer 4

Here is the solution you've been searching for. It's important to keep in mind that mobile browsers tend to disregard the position:fixed property, so you'll need to incorporate some JavaScript to ensure it works properly on those devices. Be sure to set the container's minimum height to 200px.

#sidebar
{
    height: 200px;
    position: fixed;    /* Keeps element in place when scrolling */
    top: 50%;       /* Moves down 50% from top of container */
    margin-top: -100px; /* Adjusts back up half the height of this element */
}

#container
{
    min-height: 200px;
    _height: 200px; /* Specifies height for IE6 since it treats height as min-height unless overflow is hidden */
}

Vertically centered sidebar now stationary

Answer №1

Answer №2

Similar questions

Exploring array data retrieval in Angular

Using jQuery to update a PrimeFaces command button inside a data table

"Organizing Your Content: A Guide to Grouping Information under Specific

Reactjs rendering problem related to webpack

Harnessing the Power of Google Apps Scripts: Mastering the Art of Handling Comma-Separated Spreadsheet Values Transformed

"I am looking for a way to retrieve dynamic data from a (click) event in Angular. Can

Comparison of Jquery autocomplete performance: Would php/mysql/jquery or html/json/jquery be quicker? I am comparing two different scripts to determine which one is superior in terms of speed and efficiency

The white background of the .jpg image is conflicting with the white background of the HTML

Managing login API tokens in Vue JS

Extracting auto-populate suggestions from MySQL database

Align labels on top and inputs at the bottom using Bootstrap

The dropdown menu is extending beyond the bounds of the screen on mobile devices

Is it possible to line up Ajax request in Javascript?

Guidance on executing a JavaScript function from PHP or HTML

Struggling to display the Three.js LightMap?

Having issues with jQuery append() function not working when concatenating strings

How can I allow scrolling on a background image with a fixed position?

"Encountering an issue with Asp.net:FullCalendar where events are not

I am new to javascript and jquery. I have encountered numerous cases involving audio players

Strategies for Preserving Added Field Data Using JQuery