我阅读了很多主题,但我无法解决这个问题。在 js fiddle 中它工作..在我的浏览器中它不。
这是我的浏览器屏幕..绿色标题不会粘在顶部,但下面有几行..
这是我页面中的代码
<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/