位置固定和背面可见性

时间:2014-02-20 07:14:34

标签: javascript html css css3

我有三个切片区域,其中有一个标题元素和一个位置固定的子项目。

当用户滚动时,我希望下一部分重复上一节,包括其固定的孩子。

我使用背面可视性在Chrome中工作:

-webkit-backface-visibility: hidden;    
-moz-backface-visibility: hidden;   
-ms-backface-visibility: hidden;    
backface-visibility: hidden;

但在FF中,固定项目不再固定。看看我的jsfiddle http://jsfiddle.net/7KjXm/5/

这是预期的行为吗?是否有跨浏览器解决方案?或JS是要走的路吗?

...谢谢

1 个答案:

答案 0 :(得分:7)

我设法解决了你想要的效果。不幸的是,似乎只能使用css(yet)。

Here是我的解决方案,它使用原始页面的jquery和修改过的css。我切换到数字而不是彩色元素并改变了尺寸。

我的javascript for false浮动元素(允许在视图移开时隐藏它们):

$(function(){
    elem = $('.fixeditem');
    win  = $(window);
    wrap = $('<div>').css({
        width: elem.width(),
        height: elem.height()
    });
    elem.wrap(wrap);
    win.scroll(function() {
        elem.each(function(index, element){
            element = $(element);
            var offset = element.parent().offset().top;
            element.css('top', win.scrollTop() + 40 - offset);
        });
    });
});

我的自定义css用于此特定示例:

html, body{
    height: 100%;
}

.item {
    min-height:100%;
    background-color: white;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.header {
    position: relative;
    background-color: green;
    padding: 5px;
    z-index: 2;
}

.fixeditem {
    position: relative;
    top: 10%;
    left: 50%;
    z-index: 0;
}

代码的彩色更新:http://jsfiddle.net/8F2Zc/4/

希望这有帮助!