Javascript 在codepen中，交点观察者的行为与浏览器窗口不同

如果我在单独的HTML、CSS和Javascript文件中编写并用浏览器打开它，当在视口高度中间观察到目标时，会显示sticky sharebar，但当在视口高度底部观察到目标时，会显示codepen。原因是什么

{
    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]); 
}

{
类StickyShareBar{
构造函数（元素）{
this.element=元素；
this.contentTarget=document.getElementsByClassName（'js-sticky-sharebar-target'）；
this.showClass='sticky sharbar--on target'；
这个阈值为“50%”；
this.initShareBar（）；
}
initShareBar（）{
if（this.contentTarget.length<1）{
this.element.addClass（this.showClass）；
返回；
}
如果（支持IntersectionObserver）{
this.initObserver（）；
}否则{
this.element.addClass（this.showClass）；
}
}
initObserver（）{
const self=这个；
var观察者=新的交叉观察者(
函数（条目，观察者）{
self.element.classList.toggle（self.showClass，条目[0].isIntersecting）；
}, 
{
rootMargin:“0px 0px-”+此。阈值+“0px”}
);
observer.observe（this.contentTarget[0]）；
}
}
const stickyShareBar=document.getElementsByClassName（'js-sticky-sharebar'），
intersectionObserverSupported=（“IntersectionObserver”在窗口中和“IntersectionObserverEntry”在窗口中和“intersectionRatio”在窗口中和“IntersectionObserverEntry.prototype”）；
新的StickyShareBar（StickyShareBar[0]）；
}
这可能是由于
rootMargin
以及您使用的是
iframe


这是因为目标元素。当srcollbar可以到达目标元素（
js sticky sharbar target
）时，事件被触发。当内容容器宽度较小时，滚轮无法到达目标元素。因此，它不会显示在浏览器或小屏幕上。我已经更改了目标元素并将其放置在顶部。现在它的工作正如你所期望的

更改的HTML:

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

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

请参见
在CodePen中使用交叉点观察者时，我多次遇到同样的问题。正如其他人所说，这是因为CodePen在iframe中呈现您的工作，而rootMargin没有按照您可能期望的方式工作

我已经尝试了几乎所有在其他线程中描述的解决方案，这是我唯一可以使用的解决方案：

解决方案是将HTML封装在一个全宽和全高元素中，该元素设置为
位置：fixed
和
溢出：auto
。然后将该元素设置为观察者的
根
rootMargin
现在将在您的笔中按预期工作。
您的问题已解决。请检查我的答案。我不想更改目标元素。我想在目标到达视口高度中心时显示共享栏。