固定标题在Firefox中表现不同

时间：2016-09-18 18:29:50

标签： css

我的网站上有两个幻灯片菜单，一个在左边，一个在右边。我还有一个固定的标题，可以在内容的其余部分左侧或右侧推送，具体取决于打开的菜单。

这在Firefox中引起了一些问题 - 当通过单击橙色按钮打开右侧菜单时，标题会保留在原位并且不会与其他内容一起移动。左手菜单不会发生这种情况。我可以看到为什么会发生这种情况，因为它是position:fixed，但是我不明白为什么只有Firefox以这种方式行事。有办法解决这个问题吗？

https://jsfiddle.net/75dtb1zk/

HTML                                                       

<div class="content">
text
</div>

<footer class="footer">
Footer
</footer>

CSS 

html {
    position:relative;
    height:100%;
    left:0;
    right:0;
    background-color:pink;
    -webkit-transition: all .6s cubic-bezier(.645,.045,.355,1);
    transition: all .6s cubic-bezier(.645,.045,.355,1); 
}

body {
    min-height:100%;
    margin:0; 
    padding:0; 

    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.header {
    position:fixed;
    height:70px;
    width:100%;
    background-color:white;
}

.content {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;

    width:85%;
    margin-top:80px;
    margin-left:auto;
    margin-right:auto;
    padding-top:20px;
}

.footer {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
        flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
        align-items: center;
    height: auto;
    width: 100%;        
    padding: 10px 0 10px 0;
    background-color: #efefef;
}

#button-one {
    display:inline-block;
    width:30px;
    height:30px;
    margin:20px;
    background-color:green;
    cursor:pointer;
}

#button-two {
    display:inline-block;
    float:right;
    width:30px;
    height:30px;
    margin:20px;
    background-color:orange;
    cursor:pointer;
}

.push-menu-one {
    position:fixed;
    top:0px;
    left:-295px;
    width:295px;
    height:100%;
    margin:0;
    padding:0;
    background-color:wheat;
    -webkit-transition: all .6s cubic-bezier(.645,.045,.355,1);
    transition: all .6s cubic-bezier(.645,.045,.355,1);
}

.push-menu-two {
   position:fixed;
   top:0px;
   right:-295px;
   width:295px;
   height:100%;
   margin:0;
   padding:0;
   background-color:darkred;
   -webkit-transition: all .6s cubic-bezier(.645,.045,.355,1);
   transition: all .6s cubic-bezier(.645,.045,.355,1);
}

.overlay {
    position:fixed;
    z-index:9;
    top:0px;
    left:0px;
    width:0px;
    height:0px;
    background-color:#000000;
    opacity:0;v
    transition: opacity 1s, width 0s ease 1s, height 0s ease 1s;
}

.overlay.open-right,
.overlay.open-left {
    width:100%;
    height:100%;
    opacity:0.4;
    transition: opacity 1s;
}

/ * TOGGLE CLASSES * / 

html.open-left {
    left:295px;
}

.push-menu-one.open-left {
    left:0;
}

html.open-right {
    left:-295px;
}

.push-menu-two.open-right {
    right:0;
}

的jQuery 

jQuery(document).ready(function($) {

    $('#button-one').click(function() {
        $('html, .overlay, .push-menu-one').toggleClass('open-left');

    });

    $('#button-two').click(function() {
        $('html, .overlay, .push-menu-two').toggleClass('open-right');

    });

    $('.overlay').click(function() {
        $('html, .overlay, .push-menu-one, .push-menu-two').removeClass('open-left');

        $('html, .overlay, .push-menu-one, .push-menu-two').removeClass('open-right');

    });

});

1 个答案:

答案 0 :(得分：0)

好的，所以在经过一番混乱之后，我将其确定为left元素的position:relative和html。

所以现在我已经使用transform:translate3d来移动元素，因为我已经读过，这并不依赖于css定位工作（绝对，相对等）。 / p>

不幸的是，它带来了它自己的一系列问题，其中一个问题就是当我在菜单打开时向上和向下滚动时，标题似乎不再固定，但我想这就是＆＃39;是一个单独问题的问题。

https://jsfiddle.net/75dtb1zk/8/

更新了CSS 

html {
    position: relative;
    height: 100 % ;
    background - color: pink;

}

body {
    min - height: 100 % ;
    margin: 0;
    padding: 0;

    display: -webkit - box;
    display: -webkit - flex;
    display: -ms - flexbox;
    display: flex;

    -
    webkit - box - orient: vertical; -
    webkit - box - direction: normal; -
    webkit - flex - direction: column; -
    ms - flex - direction: column;
    flex - direction: column;

    -
    webkit - transition: all .6 s cubic - bezier(.645, .045, .355, 1);
    transition: all .6 s cubic - bezier(.645, .045, .355, 1);
}

.header {
    position: fixed;
    height: 70 px;
    width: 100 % ;
    background - color: white;
}

.content {
    -webkit - box - flex: 1; -
    webkit - flex: 1; -
    ms - flex: 1;
    flex: 1;

    width: 85 % ;
    margin - top: 80 px;
    margin - left: auto;
    margin - right: auto;
    padding - top: 20 px;
}

.footer {
    display: -webkit - box;
    display: -webkit - flex;
    display: -ms - flexbox;
    display: flex; -
    webkit - box - orient: vertical; -
    webkit - box - direction: normal; -
    webkit - flex - direction: column; -
    ms - flex - direction: column;
    flex - direction: column; -
    webkit - box - align: center; -
    webkit - align - items: center; -
    ms - flex - align: center;
    align - items: center;

    height: auto;
    width: 100 % ;
    padding: 10 px 0 10 px 0;
    background - color: #efefef;
}

#button-one {
    display: inline - block;
    width: 30 px;
    height: 30 px;
    margin: 20 px;
    background - color: green;
    cursor: pointer;
}

#button-two {
    display: inline - block;
    float: right;
    width: 30 px;
    height: 30 px;
    margin: 20 px;
    background - color: orange;
    cursor: pointer;
}

.push-menu-one {
    position: fixed;
    top: 0 px;
    left: -295 px;
    width: 295 px;
    height: 100 % ;
    margin: 0;
    padding: 0;
    background - color: wheat; -
    webkit - transition: all .6 s cubic - bezier(.645, .045, .355, 1);
    transition: all .6 s cubic - bezier(.645, .045, .355, 1);
}

.push-menu-two {
    position: fixed;
    top: 0 px;
    right: -295 px;
    width: 295 px;
    height: 100 % ;
    margin: 0;
    padding: 0;
    background - color: darkred; -
    webkit - transition: all .6 s cubic - bezier(.645, .045, .355, 1);
    transition: all .6 s cubic - bezier(.645, .045, .355, 1);
}

.overlay {
    position: fixed;
    z - index: 9;
    top: 0 px;
    left: 0 px;
    width: 0 px;
    height: 0 px;
    background - color: #000000;
    opacity:0;

    transition: opacity 1s, width 0s ease 1s, height 0s ease 1s;
}

.overlay.open-right,
.overlay.open-left {
    width:100%;
    height:100%;
    opacity:0.4;

    transition: opacity 1s;
}

body.open-left {
    transform:translate3d(295px,0px,0px)
}


body.open-right {
    transform:translate3d(-295px,0px,0px)
}

.header.open-left {position:fixed;}
相关问题
最新问题