--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});
}
});
});
728x90
'공부 메모 > javaScript' 카테고리의 다른 글
팝업 목록. (1) | 2020.12.31 |
---|---|
form에서 enter키로 전송 될 때/유효성 검사 (0) | 2020.12.03 |
윤년 계산& 14세 미만 가입방지. (0) | 2020.11.28 |
자동으로 움직이는 무한 반복 슬라이드 (2) | 2020.08.24 |
ajax으로 html불러와서 최근글 적용 (0) | 2020.08.20 |