如何使单个div降慢滚动速度？

目的是形成视差效果，类似花瓣网首页的banner效果

能有简单点的办法吗？如果就一张图片使用一个js库的话感觉太麻烦了。

能够单独降低滚动时banner图片的滚动速度吗？

这个据我所知就js。单凭html木有办法吧，html是结构，CSS是衣服。木有控制能力

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> new document </title>
<style type="text/css">
body{
  height: 2000px
}
.bg {
  background: url(http://hbfile.b0.upaiyun.com/img/home/banner/8b9b27958ec5005c566e9a8d1b663e561dad76effa888) center top no-repeat;
  height: 408px;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
<div class="bg" id="J_bg"></div>
<script>
$(function(){
  var $ele = $('#J_bg');
  var height = $ele.height();
  $(window).on('scroll', function(){
    var scrollTop = $(document.body).scrollTop() / 2;
    var offset = scrollTop > height ? height : scrollTop;
    $ele.css('background-position', '50% ' + offset + 'px');
  });
})
</script>
</body>
</html>

这好像和html没关系吧，就是那个banner的图片随你滚动的时候，它的position的y轴跟着滚动的动作改变，和滚动速度有一定差值就会形成视觉差，抽空我给你整个简单的demo去。

建議用js 一句話的事...

    var header = document.querySelector('header>div');
    window.onscroll = function () {
        header.style.top = document.body.scrollTop / 2 + "px";
    }

利用css的3d功能可以實現視差滾動，但不跨瀏覽器

【热门文章】