열정과 게으름 사이

페럴릭스 만들기 본문

공부 메모/javaScript

페럴릭스 만들기

현냥이 2020. 8. 29. 10:24
--html--

<div class="wrap">
	<section class="section_01"></section>
	<section class="section_02"></section>
	<section class="section_03"></section>
</div>


---css---
.wrap{width:100%; height: 1500px; }
.section_01,.section_02,.section_03{widht:100%; height:500px}

--js---
$(function(){
$(window).scrollTop(1); 로딩시 엘리먼트 자리 잡기

var section = $('section');
var sectionTop = [];

section.each(function(){
	var tg = $(this);
    sectionTop.push(tg.offset().top);
    });
    
section.css({position:'fixed'});

$(window).scroll(function(){
	var scrT = $(window).scrollTop();
    
    section.each(function(i){
    	var tg = $(this);
        var tt = -1 *scrT + sectionTop[i];
        
        if(scrT > scrtionTop[i]){
        	tt*= 0.5; 속도
            
           tg.css({top:tt});
        }
    });
           
});
        
반응형
Comments