I have a DIV that attaches to the top of the page when scrolling. For this, the object is fixed. The problem is that I also have a div inside this container, which is relatively positioned. The relatively positioned DIV showed subtle, but absolutely positioned elements inside it did not. Now, after the user scrolls and the parent DIV becomes fixed, the contents inside the relative immersion (i.e. Absolute Substance) disappear behind the fixed div. I tried some z-index materials, but this did not seem to have any effect. Here is the JSFiddle: http://jsfiddle.net/c2vqd5fw/
And here is the code:
$(document).ready(function() {
$(window).scroll(function(){
var docViewTop = $(window).scrollTop();
var offset = 0;
$('.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');
$(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>
, ( ), .
?