jQuery来给后台的印象滚动速度较慢

我有下面的代码是只是工作给予的一个DIV滚动比其他慢的印象，但与背景的div滚动时颠簸了一点问题。jQuery来给后台的印象滚动速度较慢

任何想法，为什么发生这种情况，我如何能够解决？

编辑：这似乎并没有在所有浏览器的一个问题，所以我想现在我在寻找实现这一效果的一个更安全的方式...

<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $(window).scroll(function() { 
     var scrollTop = $(window).scrollTop(); 
     var divam = 1.2; 
     $(".sky").css({ 
      "top":scrollTop/divam+"px", 
      "height":10000-(Math.round(scrollTop/divam))+"px" 
     }); 
    }); 
}); 
</script> 

<style type="text/css"> 
.sky { 
    height:10000px; 
    width:100%; 
    position:absolute; 
    top:0px; 
    left:0px; 
    background-image:url(http://library.thinkquest.org/06aug/02339/clouds45.jpg); 
    z-index:1; 
} 

.red { 
    height:10000px; 
    width:50%; 
    position:absolute; 
    top:0px; 
    right:25%; 
    background-image:url(http://www.charting-sustainability.org/writings/culture/red/red-pirate.jpg); 
    z-index:2; 
    background-position:center; 
} 
</style> 

</head> 

<body> 

<div class="sky"></div> 
<div class="red"></div> 

</body>

来源

2013-01-06 Tom

您正试图实现“视差滚动”效果。我建议你看看几篇文章，如this tutorial和this documentation。如果您需要更多的帮助，请使用此设计制作一些网站。

来源

2013-01-06 22:40:59

我有种对此做出自己的一些变化，并得到它的工作更顺畅，因为我真的不需要的插件奥利弗·库珀的所有功能指示我也一样，虽然插件可能是更好的选择，让更适合未来适应的范围。

这里是我改进的代码虽然。

<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $(window).scroll(function() { 
     var scrollTop = $(window).scrollTop(); 
     var divam = 20; 
     $("body").css({ 
      "background-position":"0px -"+scrollTop/divam+"px"  
     }); 
     $(".red").css({ 
      "margin-top":"-"+scrollTop+"px" 
     }); 
    }); 
}); 
</script> 

<style type="text/css"> 
    body { 
     background-image:url(http://library.thinkquest.org/06aug/02339/clouds45.jpg); 
     background-attachment: fixed; 
     height:21000px; 
    } 

    .red { 
     height:10000px; 
     width:50%; 
     position:fixed; 
     top:400px; 
     left:25%; 
     background-image:url(http://www.charting-sustainability.org/writings/culture/red/red-pirate.jpg); 
     background-position:center; 
     border-bottom:10px solid #000; 
    } 
</style> 

</head> 

<body> 

    <div class="sky"></div> 
    <div class="red"></div> 

</body>

来源

2013-01-09 10:38:35 Tom

jQuery来给后台的印象滚动速度较慢

回答

相关问题