如何在视口上固定div

Question

I have a fixed div on screen ( #mydiv) and is fixed at 0p x from viewport an 1000px height , my screen size is 1280 x 800 px and document height is 1600px;

so I'm loosing the extra 200px from div height, how I can calculate the top position to show while Im scrolling? and back to top:0 when scroll up again?

Answer 1

If what you want is your div to be at position:0 on top of the page but still to be scrollable when you scroll down then what you are looking at is setting your div to:

position:absolute;
top:0;

To note that divs positioned in absolute will take their position respectivly to their closes ancestor that does not have a static position (its the value by default if you dont specify any position property for it).

If by some reason you cant or dont want to have your div in absolute position, you can calculate the offset of the page and change the position of the div accordingly, assuming you are using jQuery:

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

This would make the div#mydiv move up and down along with the document, assuming its initial position is fixed at top:0

I would really use the CSS solution (absolute position) instead of the javascript one. Let the browser do its thing rather than setting up code that will eat resources needlessly.