DOM에 문제가있는 순수한 자바 스크립트가 붙은 끈적한 헤더

Question

끈적한 헤더를 만드는 기능에 문제가 있습니다.

function stick() { 
var stickyNavTop = headerNav.offset().top; 
var scrollTop = window.scrollTop(); 
while (stickyNavTop> scrollTop) { 
    headerNav.className +=("sticky"); 
} 
else { 
    headerNav.className -= ("sticky") 
} 
} 

http://jsfiddle.net/6ApJ6/1/

CSS는 간단한 .sticky {위치 : 고정}이 있습니다

코드는 다음과 같다 내가 문제가 DOM에 생각

을하지만 난 방법을 모른다 그것을 해결하기 위해. jQuery가 훨씬 쉬운 방식으로이 작업을 수행 할 수 있다는 것을 알고 있지만이 목적은 JavaScript를 배우는 것이므로 jQuery가 아닌 순수한 JS에서 답변을 찾고 있습니다. 또한 내가 가질 수있는 다른 모든 문제들, 그들이 높이 평가 될 것입니다.

미리 감사드립니다.

Answer 1

방금 ​​새 함수 호출을 만들었습니다.

var headerNav = document.getElementById("navbar"); 
    window.onscroll = function() { 
    console.log('scrolled'); 
    var scrollTop = window.pageYOffset; 

    document.getElementById("navbar").style.top =scrollTop+"px"; 
    } 

참고 또한 style.position = "절대"을 설정할 수있는 본 Demo

; javascript 함수에서.