[英]Hiding a div once scrolling past a specific div
我有一個幻燈片,其高度設置為自動,因此可以顯示任何高度的圖像。 在該幻燈片中,我有兩個箭頭,它們被包裹在帶有.center類的div中。 箭頭位於固定位置,因此滾動時會跟隨箭頭。 當您在div .center上滾動時,將顯示分配給div =“ center”的函數。
我遇到的問題是,當我滾動瀏覽幻燈片div后,箭頭仍然存在。 但是,當我向上滾動通過幻燈片div時,箭頭被隱藏了。
向下滾動到div 2或幻燈片放映結束時該如何設置腳本,其中放有一類cs-slider,中心將被隱藏?
$(window).scroll(function() {
$(".center").each( function() {
if( $(window).scrollTop() > $(this).offset().top - 150 ) {
$(this).css('opacity',1);
} else {
$(this).css('opacity',0);
}
});
});
HTML
<section class="cs-slider" style="margin-bottom: 80px;" >
<div class="center" id="box" >
<a href=# id="prev">Prev</a>
<a href=# id="next">Next</a>
</div>
<div class="slides cycle-slideshow"
data-cycle-fx="fade"
data-cycle-prev="#prev"
data-cycle-next="#next"
data-cycle-pager=".pager"
data-cycle-loader="wait"
data-cycle-swipe=true
data-cycle-swipe-fx=scrollHorz
data-cycle-auto-height=container
data-cycle-center-horz=true
data-cycle-timeout="0"
data-cycle-speed="500"
>
<div class="pager"></div>
</div>
</section><!-- slider -->
<section class="workContent fadeDown"><!-- Hide .center once you scroll over section -->
</section>
CSS
cs-slider .slides { margin:0 auto; max-width:800px; display:block; z-index:1}
.cs-slider { position:relative; text-align:center; padding:4em 0em 1em 0em;}
.center {opacity: 0; }
#prev, #next { position:fixed; top: 0%; width: 10%; height: 200px; cursor: pointer; text-indent:-9999px;}
#prev { left: 0; background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat; }
#next { right: 0; background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat;}
#prev:hover, #next:hover { opacity: .7; filter: alpha(opacity=70) }
.disabled { opacity: .5; filter:alpha(opacity=50); }
嘗試使用以下內容。
$(this).css('display', 'none');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.