js의 스크롤 이벤트를 트리거할 때 제가 만난 것은 정말 움직임이 없었습니다. 처음에는 FF에서 이렇다고 생각했지만 IE6과 IE7 모두 그런 효과가 있을 것이라고는 예상하지 못했습니다.
그래서 다음과 같은 마법의 코드를 찾았습니다. CSS만 사용하여 스크롤 효과를 구현하는 방법~~
#fixed{position:fixed;}
scrolling < ;/div>
바로 이 속성으로 스크롤이 되는군요. 하지만 아직 끝난 게 아닙니다. Firefox와 IE7만 지원합니다. IE6도 사용할 수 있다고만 말씀드렸지만 IE6을 구현하는 것은 좀 복잡합니다. >코드 복사
코드 복사
코드는 다음과 같습니다.
diffY = document.body.scrollTop
else
{}
percent=.1*(diffY-lastScrollY)
if(percent>0; )percent=Math.ceil(퍼센트);
else 퍼센트=Math.floor(퍼센트);
document.getElementById("lovexin12").style.top=parseInt(document.getElementById("lovexin12"). style.top) 퍼센트 "px"
(document.getElementById("lovexin12" ).style.top) 퍼센트 "px";
lastScrollY=lastScrollY 퍼센트
}
window.setInterval("heartBeat()",1);
관심이 있으시면 상단을 하단에 상대적으로 변경할 수 있습니다. 그러면 훨씬 더 좋습니다.
최근 js 라이브러리를 보다가 제가 더 관심을 갖고 있는 jquery가 꽤 괜찮아서~ 이제 jquery를 사용해 스크롤링을 구현하는 코드를 하나 더 올려보겠습니다. 위 코드보다 느낌이 훨씬 좋습니다. . 하지만 꼭 필요하지 않다면 선택일 뿐입니다. 결국 jquery의 코드는 수십 KB입니다.
코드 복사
코드는 다음과 같습니다.
follow : function(){
$('#cssrain').css('position','absolute')
$(window).scroll(function(){
var f_top = $(window).scrollTop() $(window).height() - $("#cssrain").height() -parseFloat($("#cssrain").css("borderTopWidth") ) - parsFloat ($("#cssrain").css("borderBottomWidth"))
$('#cssrain').css( 'top' , f_top )
});
}
자, 그 얘기는 그만 합시다! ! 이해가 안 되는 부분이 있으면 물어보시면 토론이 진행됩니다~! 내 QQ 그룹에 오신 것을 환영합니다. 함께 배우고 발전합시다. 그룹 번호: 5678537