Javascript
[Jquery] 스크롤 시 해당 영역에 class 추가
- 2022.07.07 11:13:50
[!]CSS[/!]
@media screen and (min-width: 1300px){
/* action */ #main-group .tt > * {opacity: 0;top: -50px;} #main-group.active .tt > * {opacity: 1;top: 0;} #main-group.active .tt > h3 {transition: all 0.5s 0s;} #main-group.active .tt > p {transition: all 0.5s 0.5s;} #main-group.active .tt > span {transition: all 0.5s 1s;} #main-group.active .tt > a {transition: all 0.5s 1.5s;} } [!]jquery[/!] //scroll section active
section_active = { 'init' : function(){ this.action(); }, 'action' : function(){ var $ele = { 'ani' : $('._ani'), 'win' : $(window), } $ele.win.on('load scroll', function(){ $ele.ani.each(function(i){ if( ( $ele.win.scrollTop() + ($ele.win.height() / 2) ) > $ele.ani.eq(i).offset().top ){ $(this).addClass('active'); }else{ $(this).removeClass('active'); } }); }); } } $(function(){ if($('#main ._ani').length>0){ section_active.init(); } }) 참고 사이트 : 저스트그룹 |