粘性侧边栏和页脚不起作用

Question

我正在尝试使我的侧边导航栏具有粘性，以便在您滚动页面内容时，侧边栏将保持可见（并且可滚动）并且不会随着页面内容滚动。

我也试图让我的页脚只有在页面内容小于屏幕尺寸时才具有粘性，否则它只会在页面内容结束后弹出。 （比如这个例子：https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/）

我是一名新手 Web 开发人员，试图为朋友创建一个网站作为项目。我正在努力使网站保持响应速度，以便它在手机和不同的计算机分辨率上运行良好。

我正在使用 Bootstrap 4.0.0-beta3、font-awesome 4.7.0 和 javascript。

更新：我尝试使用 flexboxes 使页脚保持粘性，但没有成功。

.wrapper {
    display: flex;
    align-items: stretch;
}

我在这里放了我的大部分代码的副本，因为在这篇文章中写出来有点大。：https://jsbin.com/xabisiq/edit?html,css,js,output

提前谢谢你！

Answer 1

好的，我们一步一步来。

侧边栏固定位置

当您提供position:fixed 的东西时，您必须明白您正在将元素从正常流程的流程中取出。它将不再呈现在其指定位置。对于fixed，它在滚动时不会移动，而是位于其他元素的顶部。有点像如果你拿起你的电脑显示器并在它的一角贴上一张黄色的便条，字面意思。您的显示器中的所有元素都会渲染和移动，您的便笺将永远存在于所有人之上。那么你如何设法查看它背后的元素呢？好吧，你必须给他们 CSS 规则来强制他们考虑fixed元素的空间，因为他们自己再也看不到那个元素了。我希望这不会太混乱。

HTML

将侧边栏 HTML 移出父 div 容器 #main-Body-Head

<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">...</nav>
<nav id="sidebar">...</nav>
<div class="container" id="main-Body-Head">...</div>

给出适当的规则：

#sidebar {
 position: fixed;
 left: 0;
 top: 61px; //size of top nav
}

看看我是如何对toppart 进行硬编码的？那是因为sidebar 不知道也不关心顶部导航元素，你必须告诉它给它一些空间，否则你将无法查看该元素。

现在您必须告诉页面的主要内容移动并为sidebar 腾出空间：

.wrapper {
    padding-left: 250px; //size of #sidebar
}

Snapshot

通过 flex 粘贴的页脚

对于这种情况，我只是在那个精彩的链接中添加了可用的 CSS 规则。真的很棒！

body{
   display: flex;
   min-height: 100vh;
   flex-direction: column;
}

#main-Body-Head { flex:1;  }

Snapshot

真的是这样。

有问题？

嗯，当您向下滚动时，您会看到侧边栏将滚动到您的页脚上。这将需要解决。此外，当您使用箭头并且侧边栏向右移动时，您需要相应地调整主体的填充。希望这会有所帮助！

我推荐我读过的关于 CSS 的最佳书籍：Andy Budd 的 CSS mastery。