javascript - Not so simple scrolling -
i don't know how describe have, i'm showing code
<div class="room-pos"> <div class="right-content nano-content"> <div id="right-fix"> </div> </div> <div class="left-content "> </div> </div> .room-pos{ position: relative; } .fixed-c{ position:fixed; } .right-content{ background: #fff none repeat scroll 0% 0%; width: 45%; position: absolute; right: 0; top:0; bottom:0; z-index:5; border-left: 1px solid #f2f2f2; } .left-content{ width: 55%; float: left; } $(window).scroll(function() { if ($(this).scrolltop() >= $('#right-fix').height() - $(window).height() + 30) { $('#right-fix').addclass( "fixed-c"); $("#right-fix").css("top", $(window).height() - $('#right-fix').height() ); } else if($(this).scrolltop() < $('#right-fix').height() - $(window).height() + 30) { if ($('#right-fix').hasclass( "fixed-c")){ $('#right-fix').removeclass( "fixed-c"); } }
});
what want build:
so when scroll down scrolltop
parameter, right block becomes fixed
, top: - px
top: -832px
. want change when right block becomes fixed
, , after start scroll top of page, right block starts scroll top too. so, when scroll bottom, right block scrolls bottom , becomes fixed
, , when scroll top right scrolls top, too. think must change top
in css
parametr dynamic, that
i'm having hard time explaining mean - hope understands.
update: new link demo!
update 2: add wnat build bugs in algorithm code example
Comments
Post a Comment