Question

I’m looking to add a scroll effect, snapping to the top of a div when the scroll wheel is released. The only problem is each div has 100% height (thus one image will be on screen at a time).
I come across this fiddle: http://jsfiddle.net/djsbaker/dxzk4/ which seems to work nicely with 300px intervals, but how can something like this be translated to divs with 100% height?

Here’s my code:

<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;
            }

Here’s a jsfiddle demo too: http://jsfiddle.net/vHAWW/

Answer 1

It works with 100% too,

depending on how many boxes you have yu need to set the boxes parent height to boxes * 100 and the boxes heights to 100/boxes, also dont forget to make the body and html 100% too.

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;}

edit:

since you are using jquery allready, might as well calculate and set the heights dynamically:

$(document).ready(function() {

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