关于您更新的代码：

Question

我正在玩我的JS（初学者）。我已经创建了堆叠面板，我撞墙了。我只是无法定位并向移动元素添加阴影类（仅当一个面板高于其他面板时，类应该添加）。现在我有这个：

＆＃13;

const boxes = Array.from(document.querySelectorAll(".box"));
    const wrapper = document.querySelector(".wrapper");
    const leftMargin = 60; //px

    function scrollWrap(e) {
        let scrollCoord = wrapper.scrollLeft; // horizontal scroll value
        
        boxes.forEach((box, index) => {
            let leftMarginStop = index * leftMargin;
            const boxCoord = box.getBoundingClientRect();
            let leftCoordPanel = boxCoord.left;
            let flag = false;
            
            
            //console.log({scrollCoord, leftMarginStop, leftCoordPanel, box});
            if (boxCoord.left <= leftMarginStop) { // if left side of pannel is less than margin 60, 120, 180,... 
                //console.log("STAHP!!");
                box.style.position = "sticky";
                box.style.left = `${leftMarginStop}px`; // sets the left to 60, 120, 180,...
                flag = true;
                
                if (flag) {
                    box.classList.add("shadow");
                    console.log(this) //how to target each panel rather than wrapper?
                } else {
                    box.classList.remove("shadow");
                }
                
            } else {
                box.style.position = "static";
                box.style.left = 0;
                flag = false;
            }
        });
    }
    
wrapper.addEventListener("scroll", scrollWrap);

＆＃13;

body {
    margin: 0;
    padding: 0;
} 
.wrapper, .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8 {
    position: sticky;
    height: 750px;
    z-index: 1;
} 
.wrapper {
    width: 1442px;
    border-right: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    overflow: scroll;
}  
.wrapper .box1 {
    min-width: 357px;
    height: 750px;
    background-color: #1a1a1a;
}
.wrapper .box2 {
    min-width: 357px;
    height: 750px;
    background-color: #333;
}
.wrapper .box3 {
    min-width: 702px;
    height: 750px;
    background-color: #4d4d4d;
}
.wrapper .box4 {
    min-width: 630px;
    height: 750px;
    background-color: #666;
}
.wrapper .box5 {
    min-width: 630px;
    height: 750px;
    background-color: #808080;
}
.wrapper .box6 {
    min-width: 357px;
    height: 750px;
    background-color: #999;
}
.wrapper .box7 {
    min-width: 630px;
    height: 750px;
    background-color: #b3b3b3;
}
.wrapper .box8 {
    min-width: 630px;
    height: 750px;
    background-color: #ccc;
}
.shadow {
    box-shadow: -4px 0px 40px rgba(0, 0, 0, 0.2);   
}

＆＃13;

<div class="wrapper">
	<div class="box box1"></div>
	<div class="box box2"></div>
	<div class="box box3"></div>
	<div class="box box4"></div>
	<div class="box box5"></div>
	<div class="box box6"></div>
	<div class="box box7"></div>
	<div class="box box8"></div>
</div>

＆＃13;

如果有人可以帮助我，请告诉我代码说明，这样我就可以看到并知道什么以及如何。我尝试使用一些标志或不使用，但每次在元素到达结尾时添加类（左边填充）。我想在元素位于其他元素之上时添加类。如果不是，请删除课程。另外，如何使它适用于鼠标滚轮？我用苹果魔法鼠标测试它，但在滚轮上它不起作用。哦，拜托，如果你看到一些非常错误的地方请告诉我，我是初学者，并想从这篇文章中学到一些东西。

Answer 1

您的代码提示：

在CSS代码中，wrapper元素具有width属性。这个导致页面和wrapper元素具有scrollbars。所以，删除它。
您无需使用javascript添加粘性框。唯一的CSS将为您完成此操作。你只需要JavaScript 用于将left属性和shadow添加到框中。
不要尝试在父元素上使用overflow: auto|scroll|hidden 一个position:sticky元素。它完全打破了粘性。 overflow: visible没问题。请参阅下面的代码段。
在您的JavaScript代码中，flag变量值始终为true，所以 shadow类无法从元素中删除。

其他说明：

如果您想在内部元素上使用position:absolute 一个粘性元素，你必须要小心。如果您的应用正在运行一个不支持position:sticky的旧浏览器，那么粘性元素不会像relative定位元素那样。所以 absolute定位元素将跳过它并查找DOM 树直到找到下一个non-static元素(absolute / relative / fixed position)，如果没有，则默认为html元素找到。换句话说，您的absolute定位元素正在进行中在屏幕上的方式不同于你预期的方式是
position: sticky;，但还没有在Edge。 IE此时无关紧要。有许多 polyfills如果你绝对必须有这种行为，但他们都使用JavaScript。更好的选择是设计您的应用程序所以粘性位置是一个光滑的添加，但应用程序仍然没有它的功能。

示例：

Answer 2

现在我已设法更新我的代码。它适用于我滚动和阴影也适用于面板。还有一些我不知道的事情。

当我添加阴影类时，我创建了转换。它工作得很完美，但是当我删除阴影类时它就会消失，没有过渡回来。这是为什么？我希望阴影以同样的方式出现和消失
如果每个面板到达左边距，如何跟踪每个面板，并且在鼠标输入和鼠标停留的情况下应用eventListener？所以，当我徘徊到＆＃34;关闭＆＃34;小组，我得到那个项目，如果我徘徊在NOT＆＃34;关闭＆＃34;小组我不会得到项目。我正在尝试使用console.log＆＃34;这个＆＃34;但它返回了鼠标输入的每个面板
如何定位每个面板，以后我可以说，当第4个面板到达左边距时，堆叠元素的边距会发生变化？

我的更新代码：

＆＃13;

const boxes = Array.from(document.querySelectorAll(".box"));
const wrapper = document.querySelector(".wrapper");
const leftMargin = 60; //px

function scrollWrap(e) {
    let scrollCoord = wrapper.scrollLeft; // horizontal scroll value

    boxes.forEach((box, index) => {
        let leftMarginStop = (index) * leftMargin; // calculation for left margin stop (60, 120, 180,...)
        const boxCoord = box.getBoundingClientRect();
        const leftSideOfCurrent = boxCoord.left; // coordinarion of left side of panel
        const rightSideOfCurrent = boxCoord.right; // coordinarion of right side of panel
        const leftSideOfNextItem = box.nextElementSibling.getBoundingClientRect().left; // coordinarion of left side of NEXT panel

        box.style.position = "sticky";
        box.style.left = `${leftMarginStop}px`;

        // controll shadow of first element
        scrollCoord > 0 ? boxes[1].classList.add("shadow") : boxes[1].classList.remove("shadow");
        // controll shadow of all 0+ elements
        if (leftSideOfCurrent <= leftMarginStop) { // if left side of pannel is less than margin 60, 120, 180,... 
            box.nextElementSibling.classList.add("shadow");
        }
        // controll removal of shadow of all 0+ elements
        if (leftSideOfNextItem === rightSideOfCurrent) {
            box.nextElementSibling.classList.remove("shadow");  
        }
        // when panel 5 reach left margin, left margin change from 60 to 30 to all panels
        if (boxes[4] && leftSideOfCurrent < leftMarginStop) {
            console.log("helo");
        }
    });
}

wrapper.addEventListener("scroll", scrollWrap);

＆＃13;

body {
    margin: 0;
    padding: 0;
} 
.wrapper, .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8 {
    position: sticky;
    height: 750px;
    z-index: 1;
} 
.wrapper {
    width: 1442px;
    border-right: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    overflow: scroll;
}  
.wrapper .box0 {
    min-width: 357px;
    background-color: #1a1a1a;
}
.wrapper .box1 {
    min-width: 357px;
    background-color: #333;
}
.wrapper .box2 {
    min-width: 702px;
    background-color: #4d4d4d;
}
.wrapper .box3 {
    min-width: 630px;
    background-color: #666;
}
.wrapper .box4 {
    min-width: 630px;
    background-color: #808080;
}
.wrapper .box5 {
    min-width: 357px;
    background-color: #999;
}
.wrapper .box6 {
    min-width: 630px;
    background-color: #b3b3b3;
}
.wrapper .box7 {
    min-width: 630px;
    background-color: #ccc;
}
.shadow {
    box-shadow: -4px 0px 40px rgba(0, 0, 0, 1.2);
    -webkit-transition: box-shadow 0.2s cubic-bezier(0.4,-0.01, 0, 0.98);
    -moz-transition: box-shadow 0.2s cubic-bezier(0.4,-0.01, 0, 0.98);
    -o-transition: box-shadow 0.2s cubic-bezier(0.4,-0.01, 0, 0.98);
    transition: box-shadow 0.2s cubic-bezier(0.4,-0.01, 0, 0.98);
}

＆＃13;

<div class="wrapper">
        <div class="box box0"></div>
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
        <div class="box box4"></div>
        <div class="box box5"></div>
        <div class="box box6"></div>
        <div class="box box7"></div>
    </div>

＆＃13;

Answer 3

这很有帮助。我知道错误但无法修复它。我已设置let leftMargin = 60;我使用let而不是var。我正在边缘工作，如果第5个面板到达左边距，所有面板的边距都会达到30px。我这样做也是为了逆转：

＆＃13;

if (index > 4 && leftSideOfCurrent <= leftMarginStop) {
    leftMargin = 30;
} else if (index < 5 && leftSideOfCurrent > leftMarginStop) {
    leftMargin = 60;
}

＆＃13;

但是现在当第5个面板到达左边距时，小于5的面板单独转换而不是全部转换，但是当第5个元素不再处于左边距时，所有面板都会同时转换。为什么会那样？我不明白。你能解释一下吗？

滚动时如何在特定div上添加类？

3 个答案:

关于您更新的代码：