0

是否可以固定表格的位置，使其随页面“滚动”，但仅在某个值之后？

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

4

4 回答 4

1

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

如果向下滚动，让 div 紧贴屏幕顶部

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

于 2012-06-21T04:14:07.563 回答
0

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

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

于 2012-06-21T04:15:01.820 回答
0

试试这个：

//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 示例

于 2012-06-21T04:17:24.423 回答
0

这是问题中引用的网站使用的方法，在没有使用框架的情况下实现（并且有过多的评论试图解释发生了什么）。这不是获得效果的最佳/最简单/最简单的方法，但我希望从学习的角度来看该网站在纯 js 中的方法是有用的。（仅在 Mac 上的 Chrome 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>
于 2012-06-21T05:30:50.050 回答