Question

这是我尝试使包装容器在页脚元素上滚动的方法。

页脚应该固定在背景中，所以它不应该移动。我想让用户感觉他正在向上移动包装层以查看固定的背景页脚。

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#wrapper {
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow-x: auto;
  background: url(https://wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_3840x2160.jpg) no-repeat center center;
  background-size: cover;
  box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.3);
}
footer {
  bottom: 0;
  z-index: -10;
  width: 100%;
  height: 300px;
  background: #555;
}

＆＃13;

<div id="wrapper"></div>
<footer>This content should stay fixed on bottom of footer</footer>

＆＃13;

Answer 1

为您编辑的代码

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#wrapper {
  width: 100%;
  
  z-index: 0;
  overflow-x: auto;
  background: url(https://wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_3840x2160.jpg) no-repeat center center;
  background-size: cover;
  box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.3);
}
footer {
  bottom: 0;
  z-index: -10;
  width: 100%;
  height: 300px;
  background: #555;
       position: fixed;
}

<div id="wrapper">
      Test</br>Test</br>Test</br>Test</br>Test</br>
      Test</br>Test</br>Test</br>Test</br>Test</br>
     Test</br>Test</br>Test</br>Test</br>Test</br>
     Test</br>Test</br>Test</br>Test</br>Test</br>
     Test</br>Test</br>Test</br>Test</br>Test</br>
 </div>
<footer>This content should stay fixed on bottom of footer</footer>

Answer 2

对于固定页脚，请position:fixed;bottom:0; 对于视差滚动，请参阅：Parallax

Answer 3

参见具体化fixed footer

修复了可滚动前容器后面的背景图层

3 个答案: