Question

是否可以修复表格的位置，使其与页面“一起滚动”，但只能在某个值之后？

我想要实现的目标类似于此网站上的标题：http://tf2trends.com/（点击全部显示，然后向下滚动）

Answer 1

这可以使用JavaScript和CSS以及任何类型的元素来完成：

Have a div cling to top of screen if scrolled down past it

http://css-tricks.com/snippets/jquery/persistant-headers-on-tables/

Answer 2

是的，您可以通过使用一些CSS类和jQuery或JavaScript编程轻松实现此功能。

你必须在某个滚动值中调用一个函数，你可以通过jQuery轻松获得它，然后更改你的表或div的CSS，它被称为position:fixed;top:0;

Answer 3

试试这个：

//keep element in view
(function($)
{
    $(document).ready( function()
    {
        var elementPosTop = $('#floatguy').position().top;
        $(window).scroll(function()
        {
            var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
            //if top of element is in view
            if (wintop > elementPosTop)
            {
                //always in view
                $('#floatguy').css({ "position":"fixed", "top":"10px" });
            }
            else
            {
                //reset back to normal viewing
                $('#floatguy').css({ "position":"inherit" });
            }
        });
    });
})(jQuery);

HTML：

<div>
    Content before floating text<br/>
    Content before floating text<br/>
    Content before floating text<br/>
</div>
<div id="floatguy">
    <span>Floating Header</span>
</div>

<div id="longguy">
        Other text <br/>
        Other text <br/>
        Other text <br/>
</div>

jsFiddle example

Answer 4

以下是问题中引用的网站使用的方法，不使用框架实现（并且过多的注释试图解释发生了什么）。这不是获得效果的最佳/最简单/最简单的方法，但我希望从学习角度看纯网站中的网站方法是有用的。（仅在Mac 19.0和Firefox 13.0上进行过测试。）

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <title>Table With Scrolling Head</title>
    <style type='text/css'>
      #scrollTable{
      margin-top:100px; /* not necessary for scrolling, just to give a little padding */
      }

      #scroller {
      z-index: 100; /* this number needs to be larger than any other z-index on the page */
      }
    </style>
  </head>
  <body>
    <table id='scrollTable'>
      <thead id='scroller'>
    <tr>
      <th>I don't leave the screen</th>
    </tr>
      </thead>
      <tbody>
    <tr><td>I do!</td></tr>
    <tr><td>I do!</td></tr>
    <!-- ... add more <tr><td>I do!</td></tr> lines to make the page long enough to scroll -->
    <tr><td>I do!</td></tr> 
      </tbody>
  </body>
<script type='text/javascript'>
function getDistFromTop(e){
    /* get the offset of element e from the top (including the offset of any elements it is nested in)*/
    y = e.offsetTop;
    e = e.offsetParent;
    while (e != null){
        y = y + e.offsetTop;
        e = e.offsetParent;            
    }
    return y;
}

function scroll() {
    var scroller = document.getElementById('scroller');
    var tab = document.getElementById('scrollTable');

    if (window.pageYOffset > getDistFromTop(tab)){ /* if the page has been scrolled farther than the distance the table is from the top... */
        scroller.style.position = 'fixed'; /* fix the position of scroller so it doesn't move with the page */
        scroller.style.top = '0px'; /* put scroller on the top of the page */
        tab.style.paddingTop = '20px'; /* add padding to the top of the table; this is done to make the table body stay where it is expected (otherwise it would move because scroller, the table header, has become fixed) */
    } else { /* if the page scrolls back so that the whole table is on the page, reset everything to their original values so the page behaves "normally" */
        scroller.style.position = 'relative'; 
        scroller.style.top = '';
        tab.style.paddingTop = '0px';
    }
}

window.onscroll = scroll;
</script>
</html>

如果行低于某个高度，则固定位置

4 个答案: