隐藏身体溢出时固定位置移动的元素

时间:2015-06-17 17:22:26

标签: javascript html css css3

我想打开一个超越身体滚动的模态图层。为了实现这一点,当显示图层时,我将身体溢出设置为隐藏,并将溢出设置为在模态图层上滚动。在视觉上,一个滚动条替换另一个。

在后台我有一个固定位置和100%宽的顶栏。当身体溢出被设置为隐藏时,100%宽度div(顶部栏)占据滚动条空间并且其元素向右移动。

如何阻止这些元素移动?

我试图计算(javascript)滚动条的宽度,当设置主体溢出时:隐藏,给右边距:“滚动条宽度”到顶部栏。那没用。

还尝试在顶栏的右端设置一个虚拟div,并设置溢出设置以滚动并强制它在打开图层时显示滚动条。我们的想法是用另一个滚动条占用丢失滚动条的空间,仅在顶部容器上。这几乎起作用但创造了1或2px闪烁。不够好。

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);

3 个答案:

答案 0 :(得分:7)

基本上...

  • 打开模态时,将菜单宽度设置为当前宽度并设置window.onresize事件处理程序,该菜单会将菜单调整为正文&# 39; s宽度。

  • 当模态关闭时,删除固定宽度和window.onresize处理程序并将菜单返回到初始状态。

本着less === more的精神,我尽可能地自由地简化你的代码。



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>
&#13;
&#13;
&#13;

答案 1 :(得分:4)

这里的问题是topBarFixed的宽度为100%。如果这个宽度是固定的,你就不会有这个问题。以下内容已在Chrome和Firefox上测试过:

将此行添加到toggleModal函数的第一行:

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

这会将宽度设置为该点处条形的实际宽度(以像素为单位)。然后,当您关闭图层时,请将其设置回100%

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

整个代码如下:

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%"); });

这是jsFiddle:http://jsfiddle.net/wmk05t0b/5/

修改

或者,你可以想出一个固定的宽度,这样就可以了:

.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;
}

答案 2 :(得分:-1)

代码中的一些错误:id只有一个。如果要将相同的样式应用于更多元素,请使用类。

<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>

无论如何,这不是导致你的问题的原因。首先,你的身体溢出应该足够了:除非你想在模态打开时阻止背景页面滚动,否则不要向你的.modal-container添加overflowY。其次,修复模态本身,并使用居中的CSS技巧将其居中(左:50%,margin-left:-half-of-your-width)。 CSS:     .body-locked {         溢出:滚动;     }

.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
}

希望它有所帮助。