Question

我读了很多主题，但我无法解决这个问题。在js小提琴它工作..在我的浏览器它没有。

这是我的浏览器的屏幕..绿色标题不会粘在顶部，但下面有一些线..

screenshot

这是我页面中的代码

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <link type="text/css" rel="stylesheet" href="css/styles.css" title="Style" media="all" />
    <title> title </title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="sticky-header.js"></script>
</head>
<body>
    <script>
      $(function () {
        $("table").stickyTableHeaders();
      });
    </script>
<table.... //from here is identical to the fiddle html

感谢

Answer 1

以下代码行似乎是导致问题的一段优化。它下面的行告诉标题在哪里定位，但是这部分告诉函数提前退出，因为它认为它不是出于某种原因所必需的。取出它意味着代码可能会运行得慢一点，但总会有效。没有它似乎运行正常，但如果在实际场景中滚动时页面明显滞后，那么尝试优化它而不是完全取出它可能会更好。

if (!base.isSticky || winScrollTop < 0 || winScrollTop + base.$window.height() <= base.$originalHeader.parent().get(0).scrollHeight || winScrollLeft < 0 || winScrollLeft + base.$window.width() > base.$document.width()) {
    return;
}

出于某种原因，这在jsfiddle中工作正常，其中有不同的帧，但是当所有内容都在主窗口中时不起作用。 简易解决方案：删除。

Answer 2

对于标题，只需将其设为position: fixed即可。这将使它坚持到顶部！：）

修改这不需要Javascript（JQuery）。这可以简单地用CSS完成。为标头容器创建一个ID，然后使其位置：fixed。简单！然后它会粘在页面顶部。

编辑2

请参考这个小提琴：http://jsfiddle.net/yu765bwh/ 重要我的意思是：固定不是相对的！

粘性标题不粘

2 个答案: