位置粘性顶部和底部
是否有一种方法可以更新this gist，以便在滚动过程中将侧边菜单导航扩展到视口的底部，直到页脚将其向上推？它还应该保持其当前的position: sticky粘贴到视口顶部的行为。
编辑1：是的，这是下面链接的问题的重复，但是链接的帖子中给出的答案实际上并不能解决问题！
编辑2：澄清一下：我要实现的只是一个侧导航元素，它占用了其可用的全部高度。向下滚动时，元素应“粘在”视口顶部（这是position: sticky与top:0的完美结合。类似地，当您向下滚动 bottom 元素应该向下生长-应该 stick 到视口的底部，直到向下滚动很远，以使页脚开始向上推动元素（此时应该收缩）。侧面导航在视口中会占用尽可能多的空间，但永远不会在视口外扩展。如果其中的内容大于视口中的容纳空间，则此溢出应该可以滚动-但整个元素都是总是在视口范围内！
编辑3：我上传了一个video to youtube。看到顶部和底部标记？那正是恰好，我希望将side-nav元素的顶部和底部设置为该位置。基本上，我希望元素始终被夹在顶部和底部之间。
[这基本上是this问题的转贴...很抱歉，但是这里没有提供答案，我已经坚持了好几天。]
我希望获得的效果类似于position: sticky，具有顶部和底部触发点...请参阅原始帖子的以下屏幕截图。我基本上是在尝试构建像this one on the gitbook site这样的侧面导航。
纯CSS会很棒，但是如果需要JS，那也很好！请帮忙！
1 个答案:
答案 0 :(得分：0)
已编辑：影响左右的div。
我不确定您想要的效果，因为gitbook site的左侧导航栏比主要内容要短得多，而您的左侧导航栏要比主要内容要长得多。这是我认为您要尝试实现的目标-使用javascript。
*经过编辑以满足OP对要求的阐明。
将CSS更改为
.page-layout-nav,
.page-layout-aside {
position: sticky;
top: 0px;
bottom:1px;
overflow: auto;
height: 100vh;
}
然后尝试使用此脚本在滚动过程中调整左侧导航栏的高度。
var doch = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
document.addEventListener("DOMContentLoaded", function() {
var onav = document.getElementsByClassName('page-layout-nav')[0];
var onavr = document.getElementsByClassName('page-layout-aside')[0];
var doch = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
topspace = window.scrollY + doch - 16 - 50 - 2;
onav.style.height = topspace + "px";
onavr.style.height = topspace + "px";
});
function update() {
var onav = document.getElementsByClassName('page-layout-nav')[0];
var onavr = document.getElementsByClassName('page-layout-aside')[0];
var ofooter = document.getElementsByClassName('page-footer')[0];
var threshold = window.scrollY + doch + 16;
var topspace = 0;
if (window.scrollY < 16 + 50) {
topspace = window.scrollY + doch - 16 - 50 - 2;
onav.style.height = topspace + "px";
onavr.style.height = topspace + "px";
} else if (threshold >= ofooter.offsetTop) {
onav.style.height = doch - threshold + ofooter.offsetTop + "px";
onavr.style.height = doch - threshold + ofooter.offsetTop + "px";
} else {
onav.style.height = (doch - 1) + "px";
onavr.style.height = (doch - 1) + "px";
}
}
window.addEventListener('scroll', update);
以下是具有可运行结果的完整代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GistRun</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
.page-header,
.page-footer {
height: 50px;
background-color: #ccc;
}
.page-layout {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin: 16px 0;
}
.page-layout-nav,
.page-layout-main,
.page-layout-aside {
border: 1px dotted;
}
.page-layout-nav {
order: 0;
width: calc(25% - 16px);
}
.page-layout-main {
order: 1;
width: 50%;
}
.page-layout-aside {
order: 2;
width: calc(25% - 16px);
}
.page-layout-nav,
.page-layout-aside {
position: sticky;
top: 0px;
bottom:1px;
overflow: auto;
height: 100vh;
}
</style>
</head>
<body>
<header class="page-header">
Contoso
</header>
<div class="page-layout">
<main class="page-layout-main">
<h1>Hello World</h1>
<p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar.
lorem ipsum sumit dolar. </p>
<h2>Foo</h2>
<p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar.
lorem ipsum sumit dolar. </p>
<h2>Bar</h2>
<p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar.
lorem ipsum sumit dolar. </p>
<h2>Foo</h2>
<p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar.
lorem ipsum sumit dolar. </p>
<h2>Bar</h2>
<p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar.
lorem ipsum sumit dolar. </p>
</main>
<nav class="page-layout-nav">
<ul>
<li><a href="#">1st foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
</ul>
</nav>
<aside class="page-layout-aside">
<h2>In this article</h2>
<ul>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
</ul>
</aside>
</div>
<footer class="page-footer">
foo bar baz
</footer>
<script>
var doch = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
document.addEventListener("DOMContentLoaded", function() {
var onav = document.getElementsByClassName('page-layout-nav')[0];
var onavr = document.getElementsByClassName('page-layout-aside')[0];
var doch = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
topspace = window.scrollY + doch - 16 - 50 - 2;
onav.style.height = topspace + "px";
onavr.style.height = topspace + "px";
});
function update() {
var onav = document.getElementsByClassName('page-layout-nav')[0];
var onavr = document.getElementsByClassName('page-layout-aside')[0];
var ofooter = document.getElementsByClassName('page-footer')[0];
var threshold = window.scrollY + doch + 16;
var topspace = 0;
if (window.scrollY < 16 + 50) {
topspace = window.scrollY + doch - 16 - 50 - 2;
onav.style.height = topspace + "px";
onavr.style.height = topspace + "px";
} else if (threshold >= ofooter.offsetTop) {
onav.style.height = doch - threshold + ofooter.offsetTop + "px";
onavr.style.height = doch - threshold + ofooter.offsetTop + "px";
} else {
onav.style.height = (doch - 1) + "px";
onavr.style.height = (doch - 1) + "px";
}
}
window.addEventListener('scroll', update);
</script>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？