javascript - 这种使用 javascript 读取 位置的方法有什么问题？

Question

我正在尝试为我的网站制作一个持久 header 。我写了以下不起作用的代码。当我进行调试时，我发现它甚至无法读取 div 的正确位置，这就是问题所在。这是代码:

<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");

});

然而，输出的答案似乎并不正确。这是我滚动页面时的输出:

位置顶部:101.45001220703125位置顶部:101.41668701171875位置顶部:101.41668701171875位置顶部:101.04998779296875位置顶部:101.16668701171875位置顶部:101.3999938 9648438位置顶部:100.63333129882812位置顶部:100.98333740234375位置顶部:101.33331298828125位置顶部:100.79998779296875位置顶部:101.21665954589844位置顶部: 101.10000610351562顶部位置:100.63333129882812顶部位置:101.05000305175781顶部位置:100.93333435058594顶部位置:101.23333740234375顶部位置:101.416671752929 69位置顶部:100.60000610351562位置顶部:100.71665954589844位置顶部:101.18333435058594位置顶部:100.53334045410156位置顶部:101.23333740234375位置顶部:101.350006103 51562位置顶部:100.69999694824219位置顶部:101.05000305175781位置顶部:100.51666259765625位置顶部:100.63333129882812位置顶部:100.86666870117188位置顶部:101.33332824707031位置顶部:100.91667175292 969

它在 100 左右波动。谁能告诉我哪里出错了？

提前感谢您的帮助!

Answer 1

不要这样做。在标题上使用 css position : fixed。