javascript - how to maintain div fixed on viewport -

javascript - how to maintain div fixed on viewport -

i have fixed div on screen (#mydiv) , fixed @ 0px viewport 1000px height, screen size 1280 x 800 px , document height 1600px;

so i'm loosing 200px div height, how can calculate top position show while im scrolling? , top:0 when scroll again?

if want div @ position:0 on top of page still scrollable when scroll downwards looking @ setting div to:

position:absolute; top:0;

to note divs positioned in absolute take position respectivly closes ancestor not have static position (its value default if dont specify position property it).

if reason cant or dont want have div in absolute position, can calculate offset of page , alter position of div accordingly, assuming using jquery:

$( window ).scroll(function() { $( "#mydiv" ).css({ top: -$(document).offset().top }) });

this create div#mydiv move , downwards along document, assuming initial position fixed @ top:0

i utilize css solution (absolute position) instead of javascript one. allow browser thing rather setting code eat resources needlessly.

javascript jquery