css - 固定标题的问题 - 没有水平滚动

标签 css html

我需要在用户滚动页面时显示标题。 我将标题设置为固定位置,它在滚动时保持不变,但是当我调整浏览器大小时,我没有看到水平滚动条,因此我看不到导航中的所有元素。

<body>    
        <header>
            <div id="topHeader">
                <p>test</p>
            </div>
                <nav>
                    ... navigation items ...
                </nav>            
        </header>
        <div id="content">
            @RenderBody()
        </div>    
</body>

CSS

#content{margin-top:80px;}
#topHeader{width: 100%; background: #262626; height: 40px;margin:0;}
header
{   
    width: 100%;
    position: fixed;
    top: 0;
}

最佳答案

这对我获得 facebook header 的行为很有帮助

<div id="headercontainer" style="position: fixed; width: 100%">
  <div id="actualheader" style="position: relative; width: 1000px; margin: 0 auto">
  </div>
</div>

使用以下 jquery:

<SCRIPT>
    $(window).scroll(function() {
    $('#actualheader').css('left', -$(this).scrollLeft() + "px");
    });
</SCRIPT>

还没有测试兼容性

关于css - 固定标题的问题 - 没有水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9846807/

相关文章:

html - 如何让我的文本成为带有填充和省略号的两行?

html - 最小化标题图像和博客文章之间的空间

jquery - 图像 slider 效果!在彼此之上滚动

JavaScript 保留重复的内容

javascript - 有没有一种方法可以检查容器是否需要滚动条?

javascript - 如何在 Angular 中获取动态渲染元素的尺寸

html - 链接只能在边框上点击?

javascript - 流体宽度单行文本区域

javascript - 未捕获的引用错误 : Unexpected Token }

css - 带有 CSS 引用的 Kendo UI 网格