Question

我需要在用户滚动页面时显示标题。我将标题设置为固定位置并在滚动时停留但是当我调整浏览器大小时我没有得到水平滚动条，所以我无法在导航中看到所有项目。例如。

<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;
}

Answer 1

这对我来说得到了facebook标题的行为

<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>

尚未测试兼容性

Answer 2

你不能在html / css中这样做。转到this site并向下缩小浏览器窗口，页脚是固定位置，您丢失了右侧的内容，但如果您使用水平滚动条，它会移动。我用jquery做了这个。这是我使用的代码。基本上我正在移动与Windows滚动位置相关的固定div内的内容。

    if ($(window).width() < 990) {
    $('#copyright').css({ 'left': (20 - $(window).scrollLeft()) + 'px' });
    $('#click-to-call, #erving').css({ 'right': (20 + $(window).scrollLeft()) + 'px'});
  }
$(window).scroll(function() {
  if ($(window).width() < 990) {
    $('#copyright').css({ 'left': (20 - $(window).scrollLeft()) + 'px' });
    $('#click-to-call, #erving').css({ 'right': (20 + $(window).scrollLeft()) + 'px'});
  }
  else {
    $('#copyright').css({ 'left': '20px' });
    $('#click-to-call, #erving').css({ 'right': '20px' });
  }
});

}）;

Answer 3

您将宽度设置为100％，这意味着在这种情况下100％的视口。元素不会超过该点，这意味着没有水平滚动条。

你真的不应该修改一些不适合它的视口。当它变得太大时，考虑添加某种箭头来平移导航。

Answer 4

使用最小宽度。并给老浏览器一个不同的体验，或者你可以写一些js告诉标题不要小于[数字]。此解决方案应修复 Modern Browsers 。

header{   
    min-width:960px;
    width: 100%;
    position: fixed;
    top: 0;
}

Answer 5

不完美，但这对我有用。我编写了这个java函数positionContentBelowHeader来增加内容表的边距，使其直接显示在固定标题下面。

将固定标题设置为没有最小宽度，当窗口缩小时，它会非常小。然后，在body resize事件中调用position position content函数。这样，至少没有任何东西被切断，内容向下滑动以适应更高，更紧凑的固定标题。

在后面的asp.net代码中，我还必须添加它以在页面渲染上运行位置函数

'Save dynamic employee panel height into property using javascript.
Page.ClientScript.RegisterStartupScript(Me.GetType(), "positionContentBelowHeader", "positionContentBelowHeader();", True)

我把它放在身体

id =“objMasterPageBody”onresize =“positionContentBelowHeader（）”;

＆GT;

           <script type="text/javascript">

               function positionContentBelowHeader() 
               {
                    //Set header height
                    var headerHeight = document.getElementById('<%= TableHeader.ClientID %>').clientHeight;
                    document.getElementById('<%= hidHeaderHeight.ClientID %>').value = headerHeight;            //margin: 0px auto 0px auto; height: 100%;
                    document.getElementById('<%= TableContent.ClientID %>').setAttribute("style", "height: 100%; margin-left: auto; margin-right: auto; margin-bottom: 0px; margin-top: " + headerHeight.toString() + "px");

               }

            </script>

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

5 个答案: