【发布时间】：2015-01-23 21:40:41
【问题描述】：
当您滚动时，我有一个 DIV 会粘在页面顶部。为了实现这一点，物体被固定定位。 问题是我在该容器内也有一个相对定位的 div。相对定位的 DIV 显示良好，但其中的绝对定位元素却没有。现在，在用户滚动并且父 DIV 变为固定位置后，相对潜水内的东西（即绝对东西）消失在固定 div 后面。 我尝试了一些 z-index 的东西，但似乎没有效果。 这是 JSFiddle：http://jsfiddle.net/c2vqd5fw/ 这是代码：
$(document).ready(function() {
$(window).scroll(function(){
var docViewTop = $(window).scrollTop();
var offset = 0;
/**
* Always-On-Top Scroll expects HTML in the format:
* <div class="scroll-wrapper">
* <div class="scroll-aot">...</div>
* </div>
**/
$('.scroll-wrapper').each(function(){
if($(this).hasClass('scroll-xs-disabled') && $(window).width() <= 767) {}
else if($(this).hasClass('scroll-sm-disabled') && $(window).width() <= 991) {}
else if($(this).hasClass('scroll-md-disabled') && $(window).width() > 991) {}
else {
var wrapperTop = $(this).offset().top;
var scrollAot = $(this).find('.scroll-aot')[0];
if(docViewTop >= wrapperTop && !$(scrollAot).hasClass('floating')){
$(scrollAot).width($(this).width());
$(scrollAot).css("top", offset);
$(scrollAot).toggleClass('floating');
$(this).height($(scrollAot).outerHeight());
} else if (docViewTop < wrapperTop && $(scrollAot).hasClass('floating')){
$(scrollAot).removeAttr('style'); // oh no it has no style!
$(this).removeAttr('style');
$(scrollAot).toggleClass('floating');
}
offset = offset + $(scrollAot).height();
docViewTop = docViewTop + $(scrollAot).height();
}
});
});
$('.toggle-switch').click(function(){
$(this).children().toggleClass('off');
});
});.stuff-above{
width:100%;
height:100px;
background-color:grey;
}
.stuff-below{
width:100%;
height:1000px;
background-color:grey;
}
.scroll-wrapper{
width: 100%;
}
.scroll-wrapper.small{
width: 50%;
}
.scroll-wrapper.floating{
position: relative;
}
.scroll-aot{
width: 100%;
background-color:green;
}
.scroll-aot.floating{
position: fixed;
z-index: 1000;
}
.toggle-switch{
z-index:2000;
display: inline-block;
position:relative;
overflow: hidden;
cursor:pointer;
box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
width:64px;
height:32px;
padding:0px;
border:2px solid #999999;
border-radius:2px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.toggle-switch .content{
position:absolute;
z-index:2000;
top:0px;
left:0px;
width:200%;
height:32px;
transition: left 0.4s ease-in 0s;
-moz-transition: left 0.4s ease-in 0s;
-webkit-transition: left 0.4s ease-in 0s;
-o-transition: left 0.4s ease-in 0s;
}
.toggle-switch .content.off{
left:-64px;
transition: left 0.4s ease-in 0s;
-moz-transition: left 0.4s ease-in 0s;
-webkit-transition: left 0.4s ease-in 0s;
-o-transition: left 0.4s ease-in 0s;
}
.toggle-switch .content #on{
background-color: #2FCCFF;
color: #FFFFFF;
}
.toggle-switch .content #off{
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.toggle-switch .content .option{
display: block;
float: left;
width: 50%;
height: 32px;
padding: 0px 7px;
line-height: 32px;
font-size: 14px;
font-weight: bold;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.toggle-switch .slider{
z-index:2000;
background-color:#bbbbbb;
display: inline-block;
width:34px;
height:32px;
border-left:1px solid #999999;
border-right:1px solid #999999;
position: absolute;
right:-1px;
transition: right 0.3s ease-in 0s;
-moz-transition: right 0.3s ease-in 0s;
-webkit-transition: right 0.3s ease-in 0s;
-o-transition: right 0.3s ease-in 0s;
}
.toggle-switch .slider.off{
right: 32px;
transition: right 0.3s ease-in 0s;
-moz-transition: right 0.3s ease-in 0s;
-webkit-transition: right 0.3s ease-in 0s;
-o-transition: right 0.3s ease-in 0s;
}
.toggle-switch .slider img{
max-width:32px;
max-height:32px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="stuff-above"></div>
<div class="scroll-wrapper">
<div class="scroll-aot">
<div class="onOffColumn" title="Friends from LinkedIn">
<div class="toggleSliderCntnr">
<div id="liGroup" class="toggle-switch">
<div class="content">
<div id="on" class="option">On</div>
<div id="off" class="option">Off</div>
</div>
<div class="slider">
<img class="toggleImg" src="" alt="Linkedin"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="stuff-below"></div>最奇怪的是，如果你与空盒子互动（当蓝色被隐藏时），绝对定位的东西会重新出现。 想法？
【问题讨论】：
-
更改 html 的标记或将三个标记全部用绝对定位
-
问题在于
.toggle-switch类的overflow: hidden;属性。如果您删除它，那么您的滚动问题就会消失。不幸的是，我不知道为什么会这样。如果我这样做了，我会回答而不是评论。这是一个updated fiddle 来展示这个工作。我在没有使用溢出的情况下稍微修复了开关样式，但这里需要更多的 TLC。 -
在我的 IE11 测试中运行良好。
标签： javascript jquery html css positioning