Question

我正在进行布局，其中父div具有100％宽度＆amp;窗口大小的高度。

它的子div有固定的维度说：400px with overflow：auto我想要显示滚动条。

这个子div有一个我想要添加位置的元素：固定在滚动事件上。

我的问题是每当我添加位置时：使用jQuery

修复到子div中的一个元素

滚动事件，即使是孩子div也会弹出子div具有更高的z-index＆amp;溢出：自动

这是有效的Code & Fiddle

这是什么问题？需要修复什么？

Html

<div id="wrapper">
    <div id="content">
        <p id="head">Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>

CSS

body, html {
    height: 100%
}
#wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background: #bbb;
    z-index: 999
}
#content {
    position: relative;
    width: 400px;
    height: 400px;
    overflow: auto;
    background: #eee;
    z-index: 99
}
p {
    width: 100%;
    padding: 40px;
}
#head {
    background: green
}
.fixed {
    position: fixed;
}

JS

$("#content").scroll(function() {
    if( $(this).scrollTop() > 0) {
        $('#head').addClass('fixed');
    } else {
        $('#head').removeClass('fixed');
    }         
});

Answer 1

固定的位置始终相对于视口，因此您应用于它的100％宽度将始终如此。

你可以将宽度继承应用于固定元素，这在某些浏览器中可以实现，但由于你在元素上也有填充，父宽度也不会这样做

在这种情况下你需要硬编码320px到p元素或javascript解决方案

Answer 2

Please set 

.fixed {
    position: fixed;
z-index: 0;
}

Answer 3

如果有帮助，你可以玩这个：http://jsfiddle.net/nWH3S/3/

$("#content").scroll(function() {
  if ($(this).scrollTop() > 0) {

    $('#head').addClass('fixed').css({
        width: $("#content").innerWidth()-20+"px"
    });
  } else {
    $('#head').removeClass('fixed').css({
        width: $(this).width()
    });
  }
});

并查看小提琴。

这个需要像这样修复：

p {
  width: 100%;
  padding: 40px 0;// just made the padding for top bottom.
  margin:0;
}

滚动z-index问题的jQuery与position：fixed

3 个答案: