How it's done http://www.childrens2012.org/ #scrolling

Oscar Brito


I really like the UX in http://www.childrens2012.org/. The scrolling experience on the different areas of the page it's really awesome for a one-page site.

Next, I will describe how they done the scrolling of the sub-areas:


1. Load and save all sub-pages positions:


function loadLocations() {
for(var i = 0; i < locations.length; i++){
locations[i] = Math.round($('#'+pages[i]).offset().top + 20); /(browserHeight * .02));/
}
locations[1] = browserHeight;
}

loadLocations();
$(window).resize(function() {
loadLocations();
});



2. onScroll updates page elements with bootstrap class's such as "clearfix fixed_subnav"

$(window).on("scroll",function () { 
currentScroll = Math.round($(window).scrollTop());
scrollPosition(currentScroll);
});

function scrollPosition(currentScroll){

...

else if (currentScroll > (locations[6] - navPadding - (navLinkHeight * 5))){
// numbers
activeNav(pages[6]);
}

});




LINK:
http://www.childrens2012.org/



Visit www.divhide.com for more informations, contacts and news about Web Development.
See other blog posts at blog.divhide.com.



Divhide purpose is to follow the HTML5 movement and contribute with applications which prove the quality of technology.


Feel free to contact divhide.