我有一个左侧菜单,希望它始终保持粘性,我正在使用JavaScript来支持IE11。
我的问题是右侧的div在粘性时会移到左侧,不能保持位置。第二个问题是当右侧div处于粘性状态时,.content div的宽度会增加。
对于JavaScript部分,我不知道如何使右侧div在到达页脚时停止。
编辑:
我成功解决了第二个问题,代码已更新。我还尝试为右侧div添加一个right值,以使其保持初始垂直位置,但由于屏幕大小改变时位置会改变,所以这种方法不起作用。
我该如何解决这个问题?
编辑2:
对于JavaScript问题,我找到了这篇文章,帮助我解决了问题: Make sticky/fixed element stop at footer
我的问题是右侧的div在粘性时会移到左侧,不能保持位置。第二个问题是当右侧div处于粘性状态时,.content div的宽度会增加。
对于JavaScript部分,我不知道如何使右侧div在到达页脚时停止。
编辑:
我成功解决了第二个问题,代码已更新。我还尝试为右侧div添加一个right值,以使其保持初始垂直位置,但由于屏幕大小改变时位置会改变,所以这种方法不起作用。
我该如何解决这个问题?
编辑2:
对于JavaScript问题,我找到了这篇文章,帮助我解决了问题: Make sticky/fixed element stop at footer
var sticky = document.getElementsByClassName("sticky-element")[0];
var stickyAnchor = sticky.parentNode;
var state = false;
function getAnchorOffset() {
return stickyAnchor.getBoundingClientRect().top;
}
updateSticky = function (e) {
if (!state && (getAnchorOffset() < 0)) {
sticky.classList.add("is-sticky");
sticky.parentElement.classList.add("has-sticky");
state = true;
} else if (state && (getAnchorOffset() >=0 )) {
sticky.classList.remove("is-sticky");
sticky.parentElement.classList.remove("has-sticky");
state = false;
}
}
window.addEventListener('scroll', updateSticky);
window.addEventListener('resize', updateSticky);
updateSticky();
.main-wrapper {
margin: 48px 48px 0 48px;
max-width: 1366px;
}
.wrapper {
width: 100%;
display: flex;
justify-content: space-between;
position: relative;
}
.wrapper.has-sticky .content{
margin-right: calc(199px + 72px);
}
.content {
flex: 0 1 1040px;
width: calc(1040px - 72px);
min-width: 1%;
margin-right: 72px;
height: 1200px;
background-color: #e6e9f0;
}
.nav-menu {
position: static;
flex: 0 1 199px;
width: 199px;
min-width: 199px;
color: white;
height: 300px;
background-color: #04246a;
right: 10%;
}
footer {
background-color: yellow;
height: 300px;
margin-top: 50px;
}
.is-sticky {
top: 0;
position: fixed;
}
<div class="main-wrapper">
<div class="wrapper">
<div class="content">
Main content
</div>
<div class="nav-menu sticky-element">
<nav>
Side content
</nav>
</div>
</div>
<footer>
Footer content
</footer>
</div>
position:sticky;
和overflow
真的不太兼容。在使用 sticky 时,这个问题已经让我遇到了几次:https://dev59.com/9FcP5IYBdhLWcg3w39o-#47878455。你可能需要查找整个 DOM 树以找到罪魁祸首。虽然听起来不像是你的问题,但最好再检查一下。 - serraosaysposition: sticky
会节省我很多时间 xD - Renaud is Not Bill Gates