jquery - Setting height of fixed element -

i'm working on page breaks default page functionality. it's gonna work this:

once first start scrolling page, splash-sort-of-screen fades down whilst background , splash fixed, once have scolled 2400px, scroll starts behave normal. solution i'm working on:

<div class="wrapper">    </p>rest of content</p> </div> <div class="splash" >    <p>splash-content has 100% height , width</p> </div> 

once load page, both div:s set position fixed. listen scroll-events , set opacity of splash based on how far down page has scrolled. once page has scrolled far splash has opacity: 0, set wrapper display: static , margin-top: 2400, make transition normal scrolling behaviour. (this done using addclass(fixed) below.

$(document).scroll(function(){     var scrolllength = parseint($(window).scrolltop());     switch(true) {           //y2004 starts show         case (scrolllength > y2004):             console.log('above 2004 bottom')             $('.wrapper').removeclass('fixed');             break;           //y2003 visible         case (scrolllength > y2003bottom):             console.log('below 2003 bottom')             $('.wrapper').addclass('fixed')              $('.splash').css('display','none');             $('.text').fadein('fast');              break;          //scrolling up, splash starts show again         case (scrolllength < y2003bottom && scrolllength > 0):             console.log('above 2003 bottom '+scrolllength)             var splashopacity = ((y2003bottom -scrolllength)/y2003bottom );             $(".splash").css('opacity',(splashopacity));             //show splash again             $('.splash').css('display', 'block');             $('.text').fadeout('fast');             break;           //default         default:             console.log(scrolllength);             return;     } }); 

fixed css: .fixed{ position: fixed; top: 0; width: 100%; margin-top: 0; }

this approach works well. problem when set wrapper "fixed" loses it's height. in turn makes impossible scroll. document expand window-size based on content of .wrapper. or other solution achieves similiar goal. css preferred javascript fine aswell!

if set position: absolute;, , has no non-statically positioned parents, should fix it. you've noted, fixed elements don't contribute height document, whereas absolute ones do.

setting body height wrapper height give scroll behavior fixed positioning, if that's need

http://jsfiddle.net/ullbw/3/

<div class='wrapper'>click me</div> 

js

$('.wrapper').on( 'click', function() {     $(this).toggleclass('fixed'); });  $('body').height( $('.wrapper').height() ); 

css

.wrapper {     height: 2000px;     width: 100%;     position: absolute;     top: 0      background-color: #e0e0e0; }  .wrapper.fixed {     position: fixed; }