【问题标题】:Horizontally scroll a fixed header/footer水平滚动固定的页眉/页脚
【发布时间】:2012-11-11 11:59:45
【问题描述】:

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

我查看了以下内容,但没有任何帮助:

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

Centering a fixed element, but scroll it horizontally

【问题讨论】:

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


    【解决方案1】:

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

    当您在 CSS 中以最小宽度将内容设置为 fixed 时,它会相对于两个轴上的窗口锁定。当窗口的大小调整到小于最小宽度时,多余的页眉/页脚将被剪裁并且无法滚动到。不幸的是,没有办法仅在 CSS 中改变这种行为。但是,有一个简单的 jQuery 修复程序可以解决您的问题(假设您已经在页面上有其他将创建水平滚动条的内容):

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

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

    【讨论】:

      猜你喜欢
      • 2012-04-04
      • 2014-08-01
      • 2020-11-20
      • 1970-01-01
      • 2011-05-03
      • 1970-01-01
      • 2015-05-03
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多