스타일이 아직 설정되지 않은 경우 설정

Question

scrollTop에 특정 값이 있으면 스타일을 설정하고 싶습니다. 스타일이 이미 설정된 경우 코드가 다시 실행되지 않아야합니다. 효율적인 방법으로 어떻게 구현할 수 있습니까?

$(window).scroll(function() { 
    var scrollTop = $(window).scrollTop(); 
    if (scrollTop >= winH) { 
     $('box').css({ 'position':'absolute', 'top': winH }); 
    } 
}); 

Answer 1

해당 스타일을 적용 할 때 변수를 true로 설정할 수 있습니다 (예 :

var scrolled = false; 
$(window).scroll(function() { 
    var scrollTop = $(window).scrollTop(); 

    if (!scrolled && scrollTop >= winH) { 
    scrolled = true; 
    $('box').css({'position':'absolute','top': winH}); 
    } 
}); 

또는 더 나은 경우 처리기를 바인딩 해제 할 수 있습니다.

$(window).on('scroll', function() { 
    var scrollTop = $(window).scrollTop(); 

    if (scrollTop >= winH) { 
    $('box').css({'position':'absolute','top': winH}); 
    $(window).off('scroll'); 
    } 
}); 

---

어쨌든

1) 당신은이 경우도 position: sticky (나는) 당신이 달성하려고하는지

를 모르는 최신 브라우저에 position: fixed를 사용하거나 할 수있다

2) scroll 이벤트에서 핸들러를 계속 호출하는 것은 좋지 않습니다. 스크롤바의 위치를 ​​정기적으로 확인하려면 시간 초과 (http://ejohn.org/blog/learning-from-twitter/ 참조)를 사용하십시오.