页面在滚动的时候,我希望边栏还有页头都可以固定在它原本的位置上。 先打开 page 样式表,找到 page__aside ,处理一下边栏区域的样式。
这里我们可以把这个容器的 position 属性设置成 sticky ,然后把 top 设置成 0,再把 height 设置成 100vh。
在浏览器上试一下,滚动页面,你会发现滚动到最后的时候,边栏上有一块跑到上面去了。 这里因为我们把元素的高度设置成了 100vh,同时这个元素的上面设置了边距。解决这个问题可以把 box-sizing 设置成 border-box。 这里可以再把 z-index 属性的值设置的大一些。
然后再到浏览器上试一下,现在就正常了。
再处理一下页面的头部,找到 page__header ,把 position 设置成 sticky ,top 设置成 0, 再把元素的 z-index 属性的值设置的大一些,不然在滚动的时候,这个元素可能会被主体内容盖住。
最后再到浏览器上试一下。现在滚动页面,页面的头部还有边栏都会固定在它原本的位置上。