Question

我有一个包含两列的表格，显示在我网站的标题下。标题非常大，所以为了查看表格，您需要向下滚动一点。

在表格的左栏中，我为读者提供了一些很长的文章，在右栏中，我想显示一个浮动的右侧边栏菜单，它会正常运行直到你滚动到它（我的意思是它没有通过它表格的上限），但在向下滚动并传递之后，它会将其位置保持在屏幕顶部。

我试过了

 position:fixed ; top: 1em; right: 1em;

但是这会显示网站顶部的侧边栏，浮动在屏幕右上角的标题上。我想保持相对于桌子的位置，而不是整个屏幕。你怎么建议我继续？

Answer 1

谢谢你的帮助，伙计们！我已经使用以下代码弄明白了，现在它完美地运行了

    function moveScroller() {
    var move = function() {
    var st = $(window).scrollTop();
    var ot = $("#scroller-anchor").offset().top;
    var s = $("#scroller");
    if(st > ot) {
        s.css({
            position: "fixed",
            top: "0px"
        });
    } else {
        if(st <= ot) {
            s.css({
                position: "relative",
                top: ""
            });
        }
    }
};
$(window).scroll(move);
move();
   }



    <div id="sidebar" style="width:270px;"> 
    <div id="scroller-anchor"></div> 
   <div id="scroller" style="margin-top:10px; width:270px"> 
    Scroller Scroller Scroller
   </div>
  </div>

   <script type="text/javascript"> 
  $(function() {
   moveScroller();
  });
 </script>

在页面中间浮动右侧边栏菜单

1 个答案: