Javascript 不带'；是否无法滚动到页面顶部之外？

我在一页上有一个长表（在页眉部分之后）。当用户向下滚动时，我希望将表格标题保持在页面顶部（即，向上滚动到顶部并保持在那里）

我已经找到了一些这样做的脚本，但是到目前为止，我还没有找到一个在IE7中工作的脚本

有人找到了解决办法吗？我不想给表格本身一个固定的高度，然后给表格一个滚动条——整个页面滚动条应该仍然使用<代码>

这可能会帮助您：

    var windw = this;

$.fn.followTo = function (pos) {
    var $this = this,
    $window = $(windw);

    $window.scroll(function (e) {

        if ($window.scrollTop() > 1665) {
            $this.css({
                position: 'relative',
                top: 1187
            });
        } else {
            if ($window.scrollTop() < pos) {
                $this.css({
                    position: 'relative'
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 0
                });
            }
        }
    });
};

$('#page-header').followTo(460);

在继续向下滚动页面时，如果需要，可以删除该元素，如果不需要，则可以删除该元素。 该函数的其余部分是检查滚动条在页面上的位置（允许使用初始页面标题），以便它知道何时“拾取”表头。在此处获取此信息的点为：

$('#page-header').followTo(460);

除此之外，当用户向上滚动时，此功能还将把标题“放”回原位

编辑：为确保在拾取页眉时内容不会“跳转”，请确保将#页眉元素包装在容器（例如#页眉容器）中，并为其指定固定的高度和宽度

我想向您指出我的来源，但我似乎找不到，不幸的是，这说得很直截了当。

是的，但它只会使表体可滚动（页眉和页脚保持不变，但表体会有一个滚动条，如果超出给定高度，就会滚动），它不会使页眉粘在页面顶部

其工作方式如下：它将列宽保存在变量中，然后从表中提取页眉和页脚，将它们放在表前后的容器中，然后将表本身放在具有所需最大高度的容器中。这样，如果表大于容器的最大高度，它将成为可滚动的。然后恢复列宽

---

我认为您可以根据自己的情况调整此插件，也可以按照此模式创建自己的插件。

SlickGrid是一个非常好的网格（表）。

---

它符合您的期望吗？

如果浏览器支持jQuery，这个脚本可以工作

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
    function stickyObject(position,top,stickyoffset) { //object
    this.position = position;
    this.top = top ;
    }
    //#tableheader represents your element's id
    $(document).ready(function(){ // stores original position details of element in an object
    tableheader = new stickyObject($("#tableheader").css("position"),$("#tableheader").css("top"));
    });

    function stickyMy(elem) {
    elemObj = (elem.data).replace("#","");
    if($(window).scrollTop()>offset.top-parseFloat(window[elemObj].stickyoffset)) {// checks if the user has scrolled past the top of the element we want to make sticky . 
    $(elem.data).addClass((elem.data).replace("#","") + "-sticky"); // if yes, then adds a class to the element elementid-sticky.
    $(elem.data).css("position","fixed");
    $(elem.data).css("top","0");
    }
    else {
    $(elem.data).removeClass((elem.data).replace("#","") + "-sticky");
    $(elem.data).css("position","");
    $(elem.data).css("position",window[elemObj].position);
    $(elem.data).css("top","");
    $(elem.data).css("top",window[elemObj].top);
    }
}
$(window).scroll("#tableheader",stickyMy).resize("#tableheader",stickyMy); 

</script>

函数stickyObject（位置、顶部、stickyoffset）{//object
这个位置=位置；
this.top=top；
}
//#tableheader表示元素的id
$（document）.ready（function（）{//存储对象中元素的原始位置详细信息
tableheader=新的stickyObject（$（“#tableheader”）.css（“位置”），$（“#tableheader”）.css（“顶部”）；
});
函数粘性（elem）{
elemObj=（elem.data）.replace（“#”，”）；
if（$（window.scrollTop（）>offset.top parseFloat（window[elemObj].stickyoffset））{//检查用户是否已滚动到要使其成为粘滞的元素的顶部。
$（elem.data）.addClass（（elem.data）.replace（“#“，”）+“-sticky”）；//如果是，则向元素elementid sticky添加一个类。
$（元素数据）.css（“位置”，“固定”）；
$（元素数据）.css（“顶部”，“0”）；
}
否则{
$（elem.data）.removeClass（（elem.data）.replace（“#“，”）+“-sticky”）；
$（元素数据）.css（“位置”，“位置”）；
$（elem.data）.css（“位置”，窗口[elemObj].position）；
$（elem.data）.css（“top”和“）；
$（elem.data）.css（“top”，窗口[elemObj].top）；
}
}
$（窗口）。滚动（“tableheader”，粘滞）。调整大小（“tableheader”，粘滞）；

这很简单，无需添加自定义脚本或js

只需使用CSS；）

让我们看看 这是当前项目中的一个示例，因此我在这个表中列出了其中的两个

<tr id="TableTitle">
        <th>302/365</th>
        <th id="secondH">Lundi 29 octobre </th>
    </tr>

所有这些都是通过position完成的，当你滚动时，它是固定的 之后，我只添加了一些造型效果：） 重要提示：z索引必须是页面上最大的数字，这样就不会有任何元素通过它（如jquery选项卡或对话框…）

应该知道有多少表格标题，并自定义宽度

#secondH {
width: 90%;
text-align: center;
}

&我让你定制你想要的外观 这很简单：）你明白吗

---

CSS power

例如，使用两个表/分区来固定两者的顶部位置

---

第一个div的高度是50px，然后第一个div top=0px，第二个div top=50px，并设置第二个div的溢出滚动，以便第二个div的滚动显示第一个div保持不变。

如果每页只有一个表，并且它位于顶部，您可以通过CSS给它一个固定的位置。虽然我怀疑这是你的方案？@PoeHah这行不通-表格标题只会停留在原来的位置，而不会滚动到顶部，表格内容也只会滚动到表格标题上方。看看这些例子，看看我在寻找什么样的东西。我想。没什么帮助。也许这有帮助？您可以查看生成的html是否在中工作IE7@PoeHaH谢谢，但是这需要表格有一个高度，并且只在表格上引入一个滚动条，而不是在整个页面上。啊，如果有适当的支持，这会容易得多。如何将此用于表格的部分？表格列的宽度是否固定？如果是这样的话，我建议你将你的头敲碎，换成ul，并使用上面的说明。但是，我做了一个slgith编辑，为了避免当#page header元素获得其固定位置时内容“跳跃”，您需要将其包装在具有固定高度和宽度的容器元素中，请参见编辑的答案。列的宽度不是固定的。在JSFIDLE中尝试了这个方法，至少对我来说，元素会固定在屏幕的顶部，即使我之前输入了

。谢谢你的解决方案，但是我觉得它不太合适！也许我误解了这个问题，你能进一步说明这个解决方案的问题是什么吗？重读这个问题，你似乎想确定一个元素的位置，这样当你向下滚动一页时，它就不会离开你，不是吗？谢谢你，尽管它不适合，因为

    #TableTitle {
position: fixed;
z-index: 2000;
padding: 4px;
background: #EFF0EB;
width: 100%;
text-align: center;
}

#secondH {
width: 90%;
text-align: center;
}