4
У меня есть DIV, который прикрепляется к верхней части страницы при прокрутке. Для этого объект фиксирован. Проблема в том, что у меня также есть div внутри этого контейнера, который относительно позиционируется. Относительно позиционированный DIV показал тонкий, но абсолютно позиционированные элементы внутри него этого не сделали. Теперь, после того, как пользователь прокручивает и родительский DIV становится фиксированным, содержимое внутри относительного погружения (т. Е. Абсолютное вещество) исчезает за фиксированным div. Я пробовал некоторые вещи z-index, но это, казалось, не имело никакого эффекта. Вот JSFiddle: http://jsfiddle.net/c2vqd5fw/ А вот код:Абсолютный DIV внутри относительного DIV внутри фиксированного Div исчезает при прокрутке
$(document).ready(function() {
$(window).scroll(function(){
\t \t var docViewTop = $(window).scrollTop();
\t \t var offset = 0;
\t \t
\t \t /**
\t \t * Always-On-Top Scroll expects HTML in the format:
\t \t * <div class="scroll-wrapper">
\t \t * <div class="scroll-aot">...</div>
\t \t * </div>
\t \t **/
\t \t $('.scroll-wrapper').each(function(){ \t \t \t
\t \t \t if($(this).hasClass('scroll-xs-disabled') && $(window).width() <= 767) {}
\t \t \t else if($(this).hasClass('scroll-sm-disabled') && $(window).width() <= 991) {}
\t \t \t else if($(this).hasClass('scroll-md-disabled') && $(window).width() > 991) {}
\t \t \t else {
\t \t \t \t var wrapperTop = $(this).offset().top;
\t \t \t \t var scrollAot = $(this).find('.scroll-aot')[0]; \t \t \t \t \t
\t \t \t \t if(docViewTop >= wrapperTop && !$(scrollAot).hasClass('floating')){
\t \t \t \t \t $(scrollAot).width($(this).width());
\t \t \t \t \t $(scrollAot).css("top", offset);
\t \t \t \t \t $(scrollAot).toggleClass('floating');
\t \t \t \t \t $(this).height($(scrollAot).outerHeight());
\t \t \t \t } else if (docViewTop < wrapperTop && $(scrollAot).hasClass('floating')){ \t
\t \t \t \t \t $(scrollAot).removeAttr('style'); // oh no it has no style!
\t \t \t \t \t $(this).removeAttr('style');
\t \t \t \t \t $(scrollAot).toggleClass('floating');
\t \t \t \t }
\t \t \t \t
\t \t \t \t offset = offset + $(scrollAot).height();
\t \t \t \t docViewTop = docViewTop + $(scrollAot).height();
\t \t \t }
\t \t }); \t \t \t \t
\t });
$('.toggle-switch').click(function(){
\t \t $(this).children().toggleClass('off');
\t });
});.stuff-above{
width:100%;
height:100px;
background-color:grey;
}
.stuff-below{
width:100%;
height:1000px;
background-color:grey;
}
.scroll-wrapper{
\t width: \t 100%;
}
.scroll-wrapper.small{
\t width: \t 50%;
}
.scroll-wrapper.floating{
\t position: \t relative; \t \t \t \t
}
.scroll-aot{
\t width: \t 100%;
background-color:green;
}
.scroll-aot.floating{
\t position: \t fixed;
\t z-index: \t 1000;
}
.toggle-switch{
\t z-index:2000;
display: inline-block;
\t position:relative;
\t overflow: hidden;
\t cursor:pointer;
\t box-sizing:content-box;
\t -moz-box-sizing:content-box;
\t -webkit-box-sizing:content-box;
\t width:64px;
\t height:32px;
\t padding:0px;
\t border:2px solid #999999;
\t border-radius:2px;
\t -moz-border-radius:5px;
\t -webkit-border-radius:5px;
}
.toggle-switch .content{
position:absolute;
\t z-index:2000;
top:0px;
\t left:0px;
\t width:200%;
\t height:32px;
\t transition: left 0.4s ease-in 0s;
\t -moz-transition: left 0.4s ease-in 0s;
\t -webkit-transition: left 0.4s ease-in 0s;
\t -o-transition: left 0.4s ease-in 0s;
}
.toggle-switch .content.off{
\t left:-64px;
\t transition: left 0.4s ease-in 0s;
\t -moz-transition: left 0.4s ease-in 0s;
\t -webkit-transition: left 0.4s ease-in 0s;
\t -o-transition: left 0.4s ease-in 0s;
}
.toggle-switch .content #on{
\t background-color: #2FCCFF;
\t color: #FFFFFF;
}
.toggle-switch .content #off{
\t background-color: #EEEEEE;
\t color: #999999;
\t text-align: right;
}
.toggle-switch .content .option{
\t display: block;
\t float: left;
\t width: 50%;
\t height: 32px;
\t padding: 0px 7px;
\t line-height: 32px;
\t font-size: 14px;
\t font-weight: bold;
\t box-sizing: border-box;
\t -moz-box-sizing: border-box;
\t -webkit-box-sizing: border-box;
}
.toggle-switch .slider{
\t z-index:2000;
background-color:#bbbbbb;
\t display: inline-block;
\t width:34px;
\t height:32px;
\t border-left:1px solid #999999;
\t border-right:1px solid #999999;
\t position: absolute;
\t right:-1px;
\t transition: right 0.3s ease-in 0s;
\t -moz-transition: right 0.3s ease-in 0s;
\t -webkit-transition: right 0.3s ease-in 0s;
\t -o-transition: right 0.3s ease-in 0s;
}
.toggle-switch .slider.off{
\t right: 32px;
\t transition: right 0.3s ease-in 0s;
\t -moz-transition: right 0.3s ease-in 0s;
\t -webkit-transition: right 0.3s ease-in 0s;
\t -o-transition: right 0.3s ease-in 0s;
}
.toggle-switch .slider img{
max-width:32px;
\t 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> \t \t \t \t
</div>
</div>
</div>
</div>
</div>
<div class="stuff-below"></div>Самое странное в том, что если вы взаимодействуете с пустой коробкой (когда синий скрыт) абсолютно позиционируется вещи появляется снова. Мысли?
изменение разметки HTML или позиции все три с абсолютной –
Проблема заключается в 'переполнения: скрытый;' атрибут для класса '.toggle-switch'. Если вы удалите его, ваша проблема с прокруткой исчезнет. К сожалению, я не знаю, почему это так. Если бы я это сделал, я бы ответил скорее ответом, а не комментарием. Вот [обновленная скрипка] (http://jsfiddle.net/xf3bhwr4/), чтобы показать эту работу. Я несколько исправил стиль переключателя, не используя переполнение, но здесь требуется еще немного TLC. – esvendsen
Он отлично работает в моем тесте в IE11. –