jquery - Object height and position change on window when scrolling document -
how jquery and/or css ? :
i have fixed object let's @ original-top : '0' (from document top) , original-height : '10px'. when scrolling down document, object changes top position down , grows height. when arrive @ bottom of document, object stops @ bottom of window (and bottom of document) , finishes @ 100px of height. , way, when scroll upto document top, finishes @ 'top : 0' , 'height : 10px'.
this fiddle want: http://jsfiddle.net/y2d4u/10/
this code in fiddle - i've left in console commands can watch progress scroll:
var initialtop = 300; var initialheight = 10; var finalheight = 500; var heightoffset = $(window).height(); var windowheight = $(window).height();// - heightoffset; var documentheight = $(document).height(); console.log('window height: ' + windowheight); console.log('document height: ' + documentheight); $('#box').height(initialheight).css('top',initialtop); $(window).scroll(function() { var scrollpercentage = $(window).scrolltop() / (documentheight - windowheight); console.log('sp: ' + scrollpercentage); var newheight = scrollpercentage * (finalheight); $('#box').height(newheight); var newtop = scrollpercentage * (windowheight - newheight - initialtop); $('#box').css('top', newtop + initialtop); });
Comments
Post a Comment