web-dev-qa-db-ja.com

コードペンでは、交差オブザーバーはブラウザーウィンドウとは異なる動作をします

このコード を個別のHTML、CSS、およびJavaScriptファイルに記述してブラウザーで開くと、ターゲットがビューポートの高さの真ん中にあると粘着性のあるシェアバーが表示されますが、ターゲットが下部にあるとコードペンで表示されますビューポートの高さ。理由は何ですか？

{
    class StickyShareBar {
        constructor(element) {
            this.element = element;
            this.contentTarget = document.getElementsByClassName('js-sticky-sharebar-target');
            this.showClass = 'sticky-sharebar--on-target';
            this.threshold = '50%'; 
            this.initShareBar();
        }

        initShareBar() {
            if(this.contentTarget.length < 1) {
              this.element.addClass( this.showClass);
              return;
            }
            if(intersectionObserverSupported) {
              this.initObserver(); 
            } else {
              this.element.addClass(this.showClass);
            }
        }

        initObserver() {
            const self = this;
            var observer = new IntersectionObserver(
              function(entries, observer) { 
                self.element.classList.toggle( self.showClass, entries[0].isIntersecting);
              }, 
              {
               rootMargin: "0px 0px -"+this.threshold+" 0px"}
            );
            observer.observe(this.contentTarget[0]);
        }
    }

    const stickyShareBar = document.getElementsByClassName('js-sticky-sharebar'),
      intersectionObserverSupported = ('IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype);

    new StickyShareBar(stickyShareBar[0]); 
}
javascripthtmlcssintersection-observer
3
Heyran.rs

targeted要素が原因です。 srcollbarがターゲット要素（js-sticky-sharebar-target）その後、イベントが発生します。コンテンツコンテナーの幅が小さい場合、スクロールホイールはターゲット要素に到達できません。このため、ブラウザや小さな画面には表示されません。対象の要素を変更して、上に配置しました。これで期待どおりに動作します。

変更されたHTML：

<div class="container new-js-sticky-sharebar-target">

変更されたJS：

this.contentTarget = document.getElementsByClassName('new-js-sticky-sharebar-target');

参照 デモ

1
Motahar Hossain