使用jquery航點「重置」divs狀態

我有一個腳本，它在用戶滾動到某個點時激活div的不透明度，這要歸功於jquery航點插件。問題是動畫只會觸發一次，我想要這樣做，如果用戶再次滾動並向下滾動，則會再次發生。使用jquery航點「重置」divs狀態

這是我的腳本，它也使用modernizr.js。

if ($("html").hasClass("no-touch")) { 
    $('#main-content').waypoint(function() { 
     $('#lvdi').animate({opacity:1}, 600); 
    }, { offset: '25%' }); 
};

HTML

<section id="home"> 
    <div id="home-inner-wrap" class="outer"> 
     <div class="inner"> 
      <div class="row">    
       <div class="col-66 center-66"> 
       ~ Content ~ 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 
<section id="main-content"> 
~ Content ~ 
</section>

來源

2014-03-27 Jordan

你能提供你的HTML？ –

HTML已添加，歡呼 – Jordan

嘗試這樣的事情就是你想實現的目標？ http://jsfiddle.net/y7SsU/2/ –

您將需要重新設置樣式一旦＃主內容的div是拿出來看。要做到這一點，加個班航點被觸發時：

if ($("html").hasClass("no-touch")) { 
    $('#main-content').waypoint(function() { 
     $('#lvdi').animate({opacity:1}, 600); 
     $('#lvdi').addClass("animated"); 

    }, { offset: '25%' }); 
};

然後用ScrollSpy插件聽退出事件，重置風格和刪除類已添加當它拿出來看。

$('#main-content').on('scrollSpy:exit',function(){ 
    if($(this).hasClass('animated')) { 
     $('#lvdi').css({'opacity' : 0}).removeClass('animated'); 
    } 

});

來源

2017-08-04 21:36:51 Digelim

使用jquery航點「重置」divs狀態

回答

相關問題