水平滚动固定的页眉/页脚

时间:2012-11-11 11:59:45

标签: c# asp.net css header html-table

我的标题设置为最小宽度960px并固定在页面顶部。当用户将窗口缩小到小于960px的大小时,会出现水平滚动条。但是,当用户水平滚动时,由于某些标题被切断,我希望能够以与页面相同的速率滚动标题...我非常希望我的标题垂直固定,但不能水平固定。

我看过以下内容,但没有帮助:

CSS: fixed position on x-axis but not y?

Centering a fixed element, but scroll it horizontally

1 个答案:

答案 0 :(得分:2)

我知道这是一个过时的问题,我不确定你是否想出来,但想提交一个答案以防其他人遇到同样的问题。

当您在CSS中将内容设置为fixed且具有最小宽度时,它将相对于两个轴上的窗口锁定。当窗口调整为小于最小宽度时,多余的页眉/页脚将被剪切,无法滚动到。不幸的是,单独使用CSS无法改变这种行为。然而,有一个简单的jQuery修复您的问题(假设您已经在页面上有其他内容将创建水平滚动条):

    $(window).scroll(function ()
    {
        $("header,footer").css('margin-left', -($(window).scrollLeft()) + "px");
    });

这将导致页眉和页脚(视情况而定)在滚动的相反方向上沿x轴移动,从而达到您想要的效果。