如何复制阿迪达斯产品页面的“双向粘性菜单”？-解网

问：

我试图复制阿迪达斯在其产品页面上使用的“双向粘性菜单”，如下所示： https://www.adidas.com/us/campus-00s-shoes/GY9473.html

在他们的产品页面上，右侧的侧边菜单具有以下效果：

向下滚动时，旁侧菜单的底部会粘在视口的底部。
侧边菜单的顶部是和向上滚动时粘在视口的顶部。

到目前为止，我所拥有的有时在向下和向上滚动时有效，但是，如果您在到达顶部或底部之前更改滚动方向，它会由于某种原因捕捉到不同的位置（这是不可取的）。这是我到目前为止的代码：

var prev_scroll_pos = 0;
const right_content = document.getElementById("right_content");
window.addEventListener("scroll", (e) => {
    const curr_scroll_pos = window.pageYOffset || document.documentElement.scrollTop;
    if (prev_scroll_pos > curr_scroll_pos) {
        // up
        right_content.style.top = "0";
        right_content.style.bottom = "auto";
        right_content.style.alignSelf = "flex-start";
    } else {
        // down
        right_content.style.top = "auto";
        right_content.style.bottom = "0";
        right_content.style.alignSelf = "flex-end";
    }
    prev_scroll_pos = curr_scroll_pos;
});

body {
    height: 500vh;
}
.container {
    display: grid;
    grid-template-columns: 2fr 1fr;
}

.main_container {
    background-color: lightsalmon;
    height: 300vh;
}
.main_content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.aside_container {
    background-color: #eee;
    position: relative;
    display: flex;
}
.aside_content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: pink;
    height: 150vh;
    width: 100%;
    position: sticky;
    bottom: 0rem;
    align-self: flex-end;
}

<div class="container">
    <div class="main_container">
        <div class="main_content">
            <span>Main Content Start</span>
            <span>Main Content Middle</span>
            <span>Main Content End</span>
        </div>
    </div>
    <div class="aside_container">
        <div class="aside_content" id="right_content">
            <span>Aside Content Start</span>
            <span>Aside Content Middle</span>
            <span>Aside Content End</span>
        </div>
    </div>
</div>

javascript html css 粘性

如何复制阿迪达斯产品页面的“双向粘性菜单”？

How do I replicate Adidas product page's "two way sticky menu"?

评论