使用javascript或jquery创建粘性侧栏

我是前端web开发新手，如果这是一个新手问题，请原谅我
我想创建一个粘性边栏，当父div在视口中时显示，当它不在视口中时消失。看看CSS技巧（它们如何在右侧创建粘性广告，一旦有空间就会出现）

我不能在css中使用position:sticky或position:fixed，因为我需要浏览器兼容性，例如etc和

div不应该一直固定在屏幕上，直到其父项结束

说明：当div进入视口时，应显示侧边栏。我不希望整个页面的边栏都被修复

我的布局是这样的：

<div class="div1">Some content</div>
<div class="div2 hidden">Some other content</div>    

const div1 = document.querySelector('.div1');   // The top div in the HTML file

const div2 = document.querySelector('.div2');   // The bottom div in the HTML file

const observerCallback = function (entries) {
   if (!entries[0].isIntersecting) div2.classList.remove('hidden');
   else div2.classList.add('hidden');
}

const observerOptions = { root: null, threshold: 0};

const observer = new IntersectionObserver(observerCallback, observerOptions);
observer.observe(div1);



边栏
此处文本
此处有更多内容…
我不能使用CSS，因为我需要浏览器兼容性

你可以，你应该<代码>位置：固定

为

下面是一个基本示例：

<div class="side-bar">You content</div>

---

首先，应该为该div元素提供一个隐藏类，使其消失。将此代码添加到CSS文件：

HTML文件如下所示：

<div class="div1">Some content</div>
<div class="div2 hidden">Some other content</div>    

const div1 = document.querySelector('.div1');   // The top div in the HTML file

const div2 = document.querySelector('.div2');   // The bottom div in the HTML file

const observerCallback = function (entries) {
   if (!entries[0].isIntersecting) div2.classList.remove('hidden');
   else div2.classList.add('hidden');
}

const observerOptions = { root: null, threshold: 0};

const observer = new IntersectionObserver(observerCallback, observerOptions);
observer.observe(div1);

这些代码将指向两个div：

const div1 = document.querySelector('.div1');

const div2 = document.querySelector('.div2');

此代码将创建一个IntersectionObserver，用于观察div1元素：

const observer = new IntersectionObserver(observerCallback, observerOptions);
observer.observe(div1);

---

无法使用css，因为我需要浏览器兼容性-如果没有任何css，您将无法使用css-可能是对css的误解？可能说明您需要兼容的浏览器，例如

位置：如果您确实仍然需要，则不能使用sticky

IE11@freedomn-m IE7-11支持

位置：固定fine@freedomn-m我做到了-哦，很抱歉，这个div不应该一直固定在屏幕上，直到它的父级结束。