position : sticky가 발생했을 때의 이벤트

새로운 position: sticky (info)을 사용하여 iOS와 같은 콘텐츠 목록을 만듭니다.position : sticky가 발생했을 때의 이벤트

이전 JavaScript 대안 (example)보다 훨씬 뛰어나며 잘 작동합니다.하지만 트리거 될 때 이벤트가 발생하지 않는다는 것을 알고 있습니다. 즉, 막대가 페이지의 맨 위에 올 때 아무 것도 할 수 없다는 것을 의미합니다. 이전 솔루션과 달리

position: sticky 인 요소가 페이지 상단에 도달하면 클래스 (예 : stuck)를 추가하고 싶습니다. 자바 스크립트로 이것을들을 수있는 방법이 있습니까? jQuery의 사용법은 괜찮습니다.

새로운 position: sticky 데모는 사용중인 here입니다.

출처

2013-04-30 AlecRust

그 기사에 최고 등급의 의견이 정확하게 문제를 해결하기 때문에 재미입니다. 그 사람은 그 자리에 자리를 잡았고, 이것은 미디어 질의가 아니라 재산이어야합니다. 그렇게하면 요소가 붙어서 스타일을 변경할 수 있습니다 (우리는 종종 그렇게합니다). 오 잘, 남자는 꿈을 꿀 수있다. –

그래, 나는 그 의견에 주목했다. 그의 제안은 훨씬 더 좋아 보인다. 아직도,'position : sticky'는 크롬이 구현 한 것입니다. 그래서 사용할 수있는 방법을 찾고 있습니다! – AlecRust

해결 방법을 찾으셨습니까? –

크롬이 position: sticky을 첨가 한 후, not ready enough 및 relegated to to --enable-experimental-webkit-features flag 인 것으로 밝혀졌다. Paul Irish said in February "기능이 기묘한 림보 상태 atm"에 있습니다.

너무 두통이 될 때까지 the polyfill을 사용하고있었습니다. 그것은 잘 작동하지만, CORS 문제 같은 모서리의 경우가 있으며 모든 CSS 링크에 대한 XHR 요청을 수행하고 브라우저에서 무시한 "position : sticky"선언을 다시 작성하여 페이지로드 속도를 늦 춥니 다.

이제는 ScrollToFixed을 사용하고 있습니다.이 레이아웃은 랩퍼로 레이아웃을 엉망으로 만들지 않기 때문에 StickyJS보다 좋습니다.

출처

2013-05-01 14:59:22 Turadg

현재 고유 솔루션이 없습니다. Targeting position:sticky elements that are currently in a 'stuck' state을 참조하십시오. 그러나 커피점 솔루션은 고유 한 position: sticky과 끈적 거림을 구현하는 polyfills 모두에서 작동합니다.

요소에 '끈적'클래스는 끈적 할 추가 : 그들은 '끈적 끈적한'상태에있을 때

.sticky { 
    position: -webkit-sticky; 
    position: -moz-sticky; 
    position: -ms-sticky; 
    position: -o-sticky; 
    position: sticky; 
    top: 0px; 
    z-index: 1; 
}

커피 스크립트는 '갇혀'클래스를 '끈적'요소의 위치를 모니터링하고 추가 :

$ -> new StickyMonitor 

class StickyMonitor 

    SCROLL_ACTION_DELAY: 50 

    constructor: -> 
    $(window).scroll @scroll_handler if $('.sticky').length > 0 

    scroll_handler: => 
    @scroll_timer ||= setTimeout(@scroll_handler_throttled, @SCROLL_ACTION_DELAY) 

    scroll_handler_throttled: => 
    @scroll_timer = null 
    @toggle_stuck_state_for_sticky_elements() 

    toggle_stuck_state_for_sticky_elements: => 
    $('.sticky').each -> 
     $(this).toggleClass('stuck', this.getBoundingClientRect().top - parseInt($(this).css('top')) <= 1)

참고 :이 코드는 수직으로 고정 된 위치에서만 작동합니다.

출처

2014-10-03 19:22:01

질문을받은 지 얼마되지 않았지만이 문제에 대한 좋은 해결책을 발견했습니다. 플러그인 stickybits은 지원되는 경우 position: sticky을 사용하고 '멈춤'일 때 요소에 클래스를 적용합니다. 저는 최근에 좋은 결과를 얻었고, 글을 쓰는 시점에서 활발한 개발을했습니다 (저에게는 더할 나위없이 좋습니다 :) :)

출처

2017-07-27 09:14:30 Davey

stickybits가있는 하나의 잡아 당김은 내가 스크롤 이벤트를 듣고있는 다른 j를 가지고있을 때 그것이 훌륭하게 작동하지 않는다는 것을 발견했다는 것입니다. 이 문제는'position : sticky' (ie11, edge)를 지원하지 않는 브라우저에서 테스트했을 때만 분명해졌습니다. – Davey

이 lib는 버그가 있습니다 **** – VSG24

누군가가 Google을 통해 Google 엔지니어 중 한 사람에게 IntersectionObserver, 사용자 정의 이벤트, 센티넬 :

https://developers.google.com/web/updates/2017/09/sticky-headers

출처

2017-10-02 18:00:10

설명이 잘못되었지만 사용자가 Chrome 전용 솔루션을 사용해도 괜찮 으면이 링크는 매우 좋은 답변입니다. – wdanda

JavaScript를 사용합니다. 순수한 CSS 접근 방식이 필요합니다. – Green

position : sticky가 발생했을 때의 이벤트

답변

관련 문제