Q:

What's wrong with this method to read the position of a  using javascript?

I am trying to make a persistent-header for my website. I wrote the following codes which does not work. While I am doing debugging I find it cannot even read the correct position of the div and that is the problem. Here is the code:
<script>
function UpdateTableHeaders() {

      /*var el             = $("#top_menu", this);
      var offset         = el.offset();
      var scrollTop      = $(window).scrollTop();
      var floatingHeader = $(".floatingHeader", this);

       if (scrollTop > offset.top) {
           floatingHeader.css(
            "visibility", "visible"
           );
       } else {
           floatingHeader.css(
            "visibility", "hidden"
           );      
       }; */
       //following lines is the code I have tried in turns to see if it can actually read the correct position or not
       $("#content").append( "position top:" + $('#top_menu').position().top);
       $("#content").append( "position top:" + $('#top_menu').offset().top);
}

// DOM Ready      
$(function() {

   var clonedHeaderRow;

       clonedHeaderRow = $("#top_menu", this);
       clonedHeaderRow
         .before(clonedHeaderRow.clone())
         .addClass("floatingHeader");

   $(window)
    .scroll(UpdateTableHeaders)
    .trigger("scroll");

});

However, the output answer doesn't seems to be correct. Here is the output when I scroll the page:
position top:101.45001220703125position top:101.41668701171875position top:101.41668701171875position top:101.04998779296875position top:101.16668701171875position top:101.39999389648438position top:100.63333129882812position top:100.98333740234375position top:101.33331298828125position top:100.79998779296875position top:101.21665954589844position top:101.10000610351562position top:100.63333129882812position top:101.05000305175781position top:100.93333435058594position top:101.23333740234375position top:101.41667175292969position top:100.60000610351562position top:100.71665954589844position top:101.18333435058594position top:100.53334045410156position top:101.23333740234375position top:101.35000610351562position top:100.69999694824219position top:101.05000305175781position top:100.51666259765625position top:100.63333129882812position top:100.86666870117188position top:101.33332824707031position top:100.91667175292969
it fluctuates around 100. Can anyone tell me where did I go wrong?
Thank in advance for any help!

A:

Don't do it this way. Use css position : fixed on your header instead.

