Div粘在一个位置:固定链接

div stick to a position:fixed link?

本文关键字：位置 链接 一个 Div      更新时间：2023-09-26

我写了一个jQuery代码来跟踪链接(position:fixed)的位置，然后使用它作为div的位置(就在它下面)。所以当用户滚动时，固定的链接(top:0; left:0; right:0;)将自动粘贴到顶部，我的jQuery代码使div在移动时跟随链接，但是它是滞后的。

<a href="link" id="link" style="position:fixed;top:0;left:0;right:0;">Link</a>
<div id="divsticktolink" style="width:200px;height:200px;position:absolute;">Test</div>
jQuery代码:

$(window).scroll(function () { 
  var link = $("#link");  
  var position = link.offset();
  var top = position.top + 10;
     $('#divsticktolink').css('left' , position.left + 'px');
     $('#divsticktolink').css('top' , top + 'px');
});

如何解决滞后部分?

p/S:我知道我可以通过将它们都放在div(即position:fixed)中来存档平滑的，但我想尝试一下这种技术。

我不知道这是否会解决延迟问题，但你可以通过组合这两行来提高效率…

 $('#divsticktolink').css('left' , position.left + 'px');
 $('#divsticktolink').css('top' , top + 'px');

在这…

 $('#divsticktolink').css({
                            'left' : position.left + 'px',
                            'top' : top + 'px'
 });

var声明也可以合并，但它可能不会产生太大的影响…

var link = $("#link"),  
    position = link.offset(),
    top = position.top + 10;
相关文章：