滚动捕捉以对具有100%高度的div进行效果

时间:2013-01-23 20:48:11

标签: jquery css scroll

我正在寻找添加滚动效果,当释放滚轮时捕捉到div的顶部。唯一的问题是每个div都有100%的高度(因此一次只能在屏幕上显示一个图像) 我遇到了这个小提琴:http://jsfiddle.net/djsbaker/dxzk4/它似乎与300px间隔很好地工作,但是这样的东西怎么能被翻译成100%高度的div?

这是我的代码:

<div class="fill-browser" style="background-image: url(../images/background-v2.jpg)"></div>
<div class="fill-browser" style="background-image: url(../images/background-v2.jpg)"></div>
<div class="fill-browser" style="background-image: url(../images/background-v2.jpg)"></div>

CSS:

 .fill-browser{
    position:relative;
    left: 1%;
    height:98%;
    width:98%;
    margin-bottom: 5px;
    background: no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
            }

这也是一个jsfiddle演示:http://jsfiddle.net/vHAWW/

1 个答案:

答案 0 :(得分:0)

它也可以100%使用,

取决于你需要多少个盒子,你需要将盒子父高度设置为盒子* 100,盒子高度设置为100个/盒子,也不要忘记将体和html设为100%。

jsfiddle.net/WQtA8

body, html {
    height:100%;
}
.box
{
    color: #fff;
    height: 10%;
    width: 300px;
    border: 1px solid white;
}
#container {
    height:1000%;
    width:300px;
    background-color:blue;
}
.red {background-color:red;}
.green {background-color:green;}
.yellow {background-color:yellow;}

编辑:

因为你正在使用jquery allready,所以不妨动态地计算和设置高度:

$(document).ready(function() {

var boxes = $(".box").length;
var height = boxes * 100 + "%";
var boxheight = 100/boxes + "%";
$("#container").css({ height : height });
  $(".box").css({height: boxheight});
});