Elements with fixed position moving when body overflow is hidden

Question

I want to open a modal layer which overtakes the body scroll. To accomplish that, when the layer is shown I'm setting the body overflow to hidden and the overflow to scroll on the modal layer. Visually, one scrollbar replaces the other.

In the background I have a top bar with fixed position and 100% wide. What happens is when the body overflow is set to hidden, the 100% width div (top bar) takes the scrollbar space and its elements move to the right.

How can I prevent those elements from moving?

I tried to calculate (javascript) the width of the scrollbar and when setting the body overflow: hidden, give a margin-right: "scrollbar width" to the top bar. That didn't work.

Also tried a dummy div at the right end of the top bar with overflow set to scroll and force it to display a scroll bar when the layer is opened. The idea was to take the space of the missing scrollbar with another scrollbar, only on the top container. That almost worked but created a 1 or 2px flickering. Not good enough.

jsFiddle here with the basic problem

var body = $('body'),
main = $('.main'),
open_modal = $('.open-modal'),
close_modal = $('.close-modal'),
modal_container = $('.modal-container'),
toggleModal = function() {
    body.toggleClass('body-locked');
    modal_container.toggleClass('dp-block');
};

open_modal.on('click', toggleModal);
close_modal.on('click', toggleModal);

Answer 1

Basically...

• When the modal is opened, set the menu width to it's current width and set a window.onresize event handler which will resize the menu to the body's width.

• When the modal is closed, remove the fixed width and the window.onresize handler and return the menu to it's initial state.

---

In the spirit of less === more I've taken the liberty of simplifying your code as much as I can.

var body = $('body');
var menu = $('#topBarFixed');

function toggleModal() {
    menu.css('width', body.hasClass('locked') ? '' : menu.width());
    window.onresize = body.hasClass('locked') ? '' : function () {
        menu.css('width',  body.width());
    }
    body.toggleClass('locked');
}

body.on('click', '.open-modal, .close-modal', toggleModal);

body {
    padding-top: 40px;
    height: 1000px;
    background: lightblue;
}

body.locked {
    height: 100%;
    overflow: hidden;
}

.modal-container {
    display: none;
    overflow-y: scroll;
    position: fixed;
    top: 0; right: 0;
    height: 100%; width: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 400;
}

body.locked .modal-container  {
    display: block !important;
}

.modal {
    height: 600px;
    width: 200px;
    margin: 50px auto;
    background: indianred;
}

#topBarFixed {
    width: 100%;
    background-color: lightgray;
    position: fixed;
    top: 0;
    left: 0;
    text-align:center;
    display: inline-block;
    z-index: 200;
}

.topBarContent {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.inner1 {
    width:30px;
    line-height: 40px;
}

.open-modal {
    position: relative;
    top: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="topBarFixed">
    <div class="topBarContent">
        <div id="inner" class="inner1">div</div>
        <div id="inner" class="inner1">div</div>
        <div id="inner" class="inner1">div</div>
        <div id="inner" class="inner1">div</div>
        <div id="inner" class="inner1">div</div>
    </div>
</div>


<p>Scroll down to open layer</p>
<button class="open-modal">Open layer</button>


<div class="modal-container">
    <div class="modal">
        <button class="close-modal">Close layer</button>
    </div>
</div>

Answer 2

Some errors in your code: id is only one. Use classes if you want to apply the same style to more elements.

<div class="topBarContent">
    <div class="inner1">div</div>
    <div class="inner1">div</div>
    <div class="inner1">div</div>
    <div class="inner1">div</div>
    <div class="inner1">div</div>
</div>

Anyways, that's not what caused your problem. First of all, your body's overflow should be enough: don't add an overflowY to your .modal-container unless you want to prevent the background page from scrolling while modal is open. Second, fix the modal itself, and center it using the centered CSS trick (left:50%, margin-left:-half-of-your-width). CSS: .body-locked { overflow:scroll; }

.modal-container {
    overflow:hidden;
    position:fixed;
    display: none;
    top: 0; right: 0;
    height: 100%; width: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 400;
}

.modal {
    position: fixed;
    height: 600px;
    width: 200px;
    margin: 50px auto 50px -100px;
    background: indianred;
    left:50%;
}
/*Reset your body, you never know*/
body {
    margin:0;
    padding:0
}

Hope it helps.

Answer 3

Your problem here is that topBarFixed has a 100% width. If this width was fixed you would not have this problem. The following has been tested on Chrome and Firefox:

Add this line to your toggleModal function's first line:

$(".topBarFixed").width($(".topBarFixed").width());

That will set the width to the actual width (in pixels) of the bar at that point. Then when you close the layer, set it back to 100%.

close_modal.on('click', function() { toggleModal(); $(".topBarFixed").width("100%"); });

The entire code looks like:

var body = $('body'),
    main = $('.main'),
    open_modal = $('.open-modal'),
    close_modal = $('.close-modal'),
    modal_container = $('.modal-container'),
    toggleModal = function() {
        $(".topBarFixed").width($(".topBarFixed").width());
        body.toggleClass('body-locked');
        modal_container.toggleClass('dp-block');
    };

open_modal.on('click', toggleModal);
close_modal.on('click', function() { toggleModal(); $(".topBarFixed").width("100%"); });

And here is the jsFiddle: http://jsfiddle.net/wmk05t0b/5/

Edit

Optionally, you could just come up with a fixed width, and that will do the trick:

.topBarFixed
{
    width:715px; /*changed from 100%*/
    height: 40px;
    background-color: lightgray;
    position: fixed;
    top: 0;
    left: 0;
    text-align:center;
    display: inline-block;
    z-index: 200;
}