一旦滚动过特定的div，就隐藏div-Hidingadivoncescrollingpastaspecificdiv

I have a slideshow that has a height set to auto so any height image can be displayed. Within that slideshow I have two arrows which are wrapped in a div with a class of .center. The arrows are at a fixed position so when scrolling the arrows would follow. The function that is assigned to div="center" will display when you scroll over the div .center.

我有一个幻灯片,其高度设置为自动,因此可以显示任何高度图像。在那个幻灯片中,我有两个箭头,它们包含在一个带有.center类的div中。箭头处于固定位置,因此在滚动箭头时会跟随。当您滚动div .center时,将显示分配给div =“center”的功能。

The problem I am having is once I scroll past the slide show div the arrows are still present. But when I scroll up past my slide show div the arrows are hidden.

我遇到的问题是,一旦我滚过幻灯片div,箭头仍然存在。但是当我向上滚动浏览幻灯片时,箭头会隐藏起来。

How can I set up my script for when I scroll down to div 2 or end of slide show which has a class of cs-slider the center will be hidden?

如何设置我的脚本,当我向下滚动到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

 

  

      Prev 
      Next
  
     


  
  
  


  

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); }

1 个解决方案

$(this).css('display', 'none');