平滑滚动问题与位置:固定;

时间:2017-06-26 19:53:17

标签: javascript jquery css scroll

我正在尝试使用这样的平滑滚动效果:Smooth scroll effect

我已经知道position:fixed;(或绝对)是问题的根源。如果我改变这个值,它可以很好地工作,但我不能因为我有一个覆盖视口的bg图像,并且无法绕过它。

我该如何解决这个问题?我发现这个article我认为解决了这个问题,但我似乎无法实现它。

我用来定位背景图片的CSS看起来像这样:

.bg {
  background-repeat:no-repeat;
  background-position:center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width:100%;
  height:100%;
  position:fixed;
  background-image: url( http://lorempixel.com/400/200/);
}

Jsfiddle

1 个答案:

答案 0 :(得分:2)

就个人而言,我会修复左上角的div而不将整个页面内容包装在其中。

jsfiddle:https://jsfiddle.net/jhyvcgv7/1/

.bg {
  background-repeat:no-repeat;
  background-position:center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width:100%;
  height:100%;
  position:fixed;
  background-image: url( http://lorempixel.com/400/200/);
  top: 0; 
  left: 0;
  z-index: -1;
}