jquery를 scrollTop의 prototype.js로 변환합니다. 아래로 스크롤하면 머리글에 해당하는 내용으로 변경됩니다.

Question

jquery, prototype.js 등과 같이 jQuery와 관련해서는 여전히 상대적인 멍청한 의견입니다. http://giglocator.com 헤더 (또는 더 작은 정도는 TechCrunch의 새롭게 디자인 된 헤더)와 비슷한 것을 복제하려고합니다. 특정 지점을지나 스크롤하면 헤더의 일부분이 화면에 남아있게됩니다. 이것은 사람이 과거 xxx 픽셀 수를 스크롤 한 후에 상대 위치에서 고정 위치로 헤더 코드를 변경하는 것으로 귀결됩니다. 나는 그가 작성한 바이올린 (http://jsfiddle.net/KEjfe/)을 포함하는 Header changes as you scroll down (jQuery)에있는 vinceh의 대답을 발견했습니다. 나는 더 많거나 적은 대신 다음 스크립트 코드를 사용하여 giglocator 유형 헤더를 할 그의 코드를 조정할 관리 : 그래서 제외하고 대단한

$("#body").scroll(function() { 
    var value = $(this).scrollTop(); 
    if (value > 120) 
     $("#header").css("position", "fixed").css("top", "0"); 
    else 
     $("#header").css("position", "relative").css("top", "120px"); 
}); 

을 나는 프로토 타입을 사용하는 포럼 소프트웨어 패키지와 함께이 작업을 수행하기 위해 노력하고 있음 .js 및 scriptaculous. jquery를로드하는 것은 낭비처럼 보입니다 (다른 것들과 함께). 프로토 타입/scriptaculous에서 작동하도록 위의 코드를 변환 할 수있는 방법이 있습니까? 또는 jquery의 스크롤 탑을로드하는 방법이 있습니까?

Answer 1

여기 피들을 기반으로하는 것은 동일합니다. 이 DOM에 올 때 두 라이브러리는 기능적으로 유사하기 때문에 http://jsfiddle.net/S7gpT/1/

Event.observe("body", "scroll", function() { 
    var value = this.scrollTop; 
    if (value > 120) 
     $("header").setStyle({border: "1px solid blue"}); 
    else 
     $("header").setStyle({border: "1px solid green"}); 
}); 

그것은 매우 비슷합니다. 차이는 그것이 # 문자를 필요로하지 않도록

• $()
  는 CSS 셀렉터 대신 ID를 걸립니다 ... 정황이다.
• 이벤트의 이름은 전용 함수를 사용하는 대신 observe()에 문자열로 전달됩니다.
• scrollTop은 요소의 기존 속성이므로 다른 함수로 묶을 필요가 없습니다.
• css()는 setStyle()