는 요소가 페이지의 상단에 도달 할 때 클래스를 추가하고 클래스를 제거

Question

난 달성하기 위해 노력하고 무엇 :

이미지의 상단 (스크롤) 창 상단에 도달

• 하는 클래스에 "끈적"클래스가 추가되었습니다.
• 이제 끈적 거리는 이미지가 컨테이너 아래쪽에 도달하면 클래스가 제거되고 요소는 마지막 마지막 위치에 유지됩니다.
• 사용자가 위로 이동하면 같은 과정이 일어나고, 맨 아래부터 시작하여 맨 위로 이동합니다.

Fiddle.

관련 jQuery를 :

• 클래스는 모든 요소에 추가
• 요소의 위치 (왼쪽/오른쪽) 변경 클래스
추가시 : I 발생할

$(".entry-thumbnail").each(function() { 
    var $this = $(this), 
     p = $this.parent(), 
     scrollT = $this.scrollTop(), 
     scrollW = $(window).scrollTop(), 
     scrollPT = p.scrollTop() + p.outerHeight(); 

    if (!$this.hasClass("sticky")) { 
     console.log("Tada!"); 
     $(window).scroll(function() { 
      if (scrollT <= scrollW) { 
       $this.addClass("sticky"); 
      } 
     }); 
    } 
    else { 
     $(window).scroll(function() { 
      if (scrollT + $this.outerHeight() >= scrollPT) { 
       $this.removeClass("sticky"); 
      } 
     }); 
    } 
}); 

문제

• 클래스가 제거되지 않습니다.

Answer 1

귀하의 문제에 대해 다른 접근 방식을 취했습니다. window.scroll 이벤트 핸들러 내부에 필요한 절대 높이를 계산 한 다음 스크롤 높이에 따라 해당 기사의 높이를 설정합니다.

데모 http://jsfiddle.net/eh3sT/을 확인하고 사용 가능한지 알려주세요.

편집 : 문제의 대부분을 스스로 해결했습니다. 고마워요 :)

나는 최적화 할 것이 많지 않다고 생각하지만, 나는 가독성을 높이기 위해 약간 수정했다. http://jsfiddle.net/eh3sT/3/embedded/result/

전체 코드에서 전체 데모를 확인하십시오

var etPos = [] 
var $articles = $("article"); 
$articles.each(function() { 
    var tPos = $(this).offset(); 
    etPos.push([tPos.top, tPos.top + $(this).height(), $(this).find('.entry-thumbnail').height()]); 
}); 

$(window).scroll(function() { 
    var scrollHeight = $(document).scrollTop(); 
    var cssProp = {}; 
    for (var i = 0; i < etPos.length; i++) { 
     var $atricle = $articles.eq(i); 
     if (scrollHeight >= (etPos[i][0]) && scrollHeight <= (etPos[i][1] - etPos[i][2] - 20)) { 
      cssProp.top = scrollHeight - etPos[i][0] + 10; 
      cssProp.bottome = "auto"; 
     } else if (scrollHeight > (etPos[i][1] - etPos[i][2] - 20) && $atricle.height() > ($atricle.find('.entry-thumbnail').height() + 10)) { 
      /* 
      Remove the second condition if the article height is always > respective thumbnail + 10. we don't want set bottom 10, if the thumbnail has no space to scroll. 
      */ 
      cssProp.top = "auto"; 
      cssProp.bottom = 10; 
     }else { 
      cssProp.top = 10; 
      cssProp.bottom = "auto"; 
     } 
     $atricle.find('.entry-thumbnail').css(cssProp); 
    } 
}); 

주 : 모든 기사의 태그에 article 클래스를 추가했습니다.