固定DIV内的相对DIV中的绝对Div在滚动时消失

Question

我有一个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>

​

最奇怪的是，如果你与空盒子交互(当蓝色隐藏时)，绝对定位的东西会重新出现。有什么想法？

Answer 1

更新:我没有完全弄清楚，但我重写了切换，所以它根本不使用绝对定位或相对定位，现在它干净利落地工作。对于任何想要查看它的人，这里是：http://jsfiddle.net/c2vqd5fw/

​

.toggle-switch .content{
	width:150%;
	height:32px;
	transition: margin-left 0.4s ease-in 0s;
	-moz-transition: margin-left 0.4s ease-in 0s;
	-webkit-transition: margin-left 0.4s ease-in 0s;
	-o-transition: margin-left 0.4s ease-in 0s;
}
.toggle-switch .content.off{
	margin-left:-32px;
	transition: margin-left 0.4s ease-in 0s;
	-moz-transition: margin-left 0.4s ease-in 0s;
	-webkit-transition: margin-left 0.4s ease-in 0s;
	-o-transition: margin-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: center;
}
.toggle-switch .content .option{
	display: inline-block;
	float: left;
	width: 31px;
	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{
    background-color:#bbbbbb;
	display: inline-block;
	float:left;
	border-left:1px solid #999999;
	border-right:1px solid #999999;
    
}
.toggle-switch .slider img{
    max-width:32px;
	max-height:32px;
    min-width:32px;
	min-height:32px;
}

<div id="liGroup" class="toggle-switch">
  <div class="content">
    <div id="on" class="option">On</div>
    <div class="slider">
      <img class="toggleImg" src="" alt="Linkedin"/>
    </div>
    <div id="off" class="option">Off</div>
  </div>				
</div>

​