javascript - 粘头不粘

标签 javascript jquery html css sticky

我阅读了很多主题,但我无法解决这个问题。在 js fiddle 中它工作..在我的浏览器中它不。

fiddle

这是我的浏览器屏幕..绿色标题不会粘在顶部,但下面有几行..

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

谢谢

最佳答案

以下代码行似乎是导致问题的一段优化。它下面的行告诉标题将自己定位在哪里,但这部分告诉函数提前退出,因为它认为出于某种原因没有必要。把它拿出来意味着代码可能运行得慢一点,但总是可以工作的。没有它似乎运行良好,但如果在真实场景中滚动时页面明显滞后,那么最好尝试优化它而不是完全删除它。

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 中工作正常,但当所有内容都在主窗口中时不起作用。 简单的解决方案:将其删除

关于javascript - 粘头不粘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29638715/

相关文章:

php - JSON 和 PHP 问题

javascript - 如何在第一次迭代后停止此电传打字机动画?

php - 如何将电子邮件发送到我的 gmail 而不是托管

css - HTML/CSS - 我应该设置什么规则才能正确对齐?

javascript - 如何访问html文件中的jquery变量

javascript - 转换分隔字符串和对象数组

javascript - 浏览器对 element.removeAttribute 的支持是什么?

javascript - RN-fetch-blob 错误 base64 - 仅限 android 问题

jQuery:在所有空文本框中放置默认值

html - Wordpress 视觉 - 没有换行符被识别