I have a DIV that sticks to the top of the page when you scroll. In order to accomplish this the object is fixed positioned. The problem is that I also have a div inside that container which is relatively positioned. The relatively positioned DIV displayed fine but the absolutely positioned elements inside of it did not. Now, after the user scrolls and the parent DIV becomes fixed positioned the stuff inside the relative dive (i.e. the absolute stuff) disappears behind the fixed div. I had tried some z-index stuff but it seemed to have no 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;
/**
* 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>The strangest thing is that if you interact with the empty box (when the blue is hidden) the absolutely positioned stuff reappears. Thoughts?
UPDATE: I didn't exactly figure it out but I re-wrote the toggle so it doesn't use absolute positioning or relative positioning at all and now it works cleanly. For anyone who wants to check it out, here it is: http://jsfiddle.net/c2vqd5fw/