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

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -