0

我正在处理父 div 具有 100% 宽度和高度的窗口大小的布局。

它的子 div 有固定尺寸说：400px 溢出：auto 因为我想显示滚动条。

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

我的问题是每当我添加位置时：使用 jQuery 固定到子 div 内的元素之一

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

这是工作代码和小提琴

这里有什么问题？需要修复什么？？

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');
    }         
});
4

3 回答 3

1

固定位置始终相对于视口，因此您应用到它的 100% 的宽度将始终做到这一点。

您可以将宽度继承应用于固定元素，这在某些浏览器中可以解决问题，但是由于您在元素上也有填充，因此父宽度也不会解决问题

在这种情况下，您必须将 320px 的宽度硬编码到 p 元素或 javascript 解决方案

于 2012-12-26T07:07:25.220 回答
0 
Please set 

.fixed {
    position: fixed;
z-index: 0;
}
于 2012-12-26T07:09:17.440 回答
0

如果有帮助，你可以玩这个：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;
}
于 2012-12-26T07:18:35.750 回答