固定标题和窗口调整大小答案

【问题标题】：Fixed header and window resize固定标题和窗口调整大小
【发布时间】：2013-11-01 14:52:51
【问题描述】：

我在网站上有一个带有导航菜单的固定标题：

#header_wrapper
{
    height: 75px;
    background-color: #FD735B;
    z-index: 999;
    position: fixed;
    width: 100%;
}
#header_wrapper .control_wrapper
{
    position: absolute;
    right: 0px;
}
#header_wrapper .control_wrapper .control
{
    float: left;
    padding-left: 35px;
    padding-top: 25px;
    font-weight: bold;
}
.inner_content
{
    height: 100%;
    margin: 0px auto;
    width: 85%;
    position: relative;
    z-index: 1;
}

这是标题的 HTML：

<div id="header_wrapper">
<div class="inner_content">
    <div class="control_wrapper">
        <div class="control local">
            <a class="white_font" id="link_user_experience">USER EXPERIENCE</a>
        </div>
        <div class="control local">
            <a class="white_font" id="link_restocking">RESTOCKING EXPERIENCE</a>
        </div>
        <div class="control local">
            <a class="white_font" id="link_analytics">ANALYTICS</a>
        </div>
        <div class="control">
            <a class="white_font" id="link_team" href="team">TEAM</a>
        </div>
    </div>
</div>

问题是，当您调整窗口大小并使其变窄时，导航菜单上的部分会被切断。如果您尝试水平滚动，它仍然会被截断。

这是被切断的标题的图像：

我正在尝试滚动到右侧 - 内容已滚动，但标题保持不变：

调整大小后如何使标题看起来不错？

更新：

我试图在jsfiddle 上重现我的问题。我为页面和标题设置了大宽度以模仿窄窗口（我的问题仅在用户调整窗口大小并使其变窄时出现）。

我在标题中放了 3 个标题。当您加载小提琴时，您只会看到其中的 2 个。第三个不在可视范围内。我认为您应该只水平滚动，固定标题将与页面的其余部分一起滚动。但是固定的标题没有滚动，你看不到标题#3。

换句话说，我需要固定标题才能像任何其他元素一样水平滚动。

【问题讨论】：

您能提供一个 codepen 或 jsfiddle 以更好地查看问题吗？
@jonathan 添加了 jsfiddle 示例。我希望它能证明我的滚动问题。

标签： html css css-position fixed

【解决方案1】：

看起来您的导航内容是 position:absolute;右：0px；即使调整了浏览器的大小，这也会导致您的导航尽可能向右移动。

如果您创建一个 li 和 float:right, display:inline-block 它应该为您提供您正在寻找的功能。

<nav>
    <ul>
       <li><a href="#">ABOUT</a></li>
       <li><a href="#">BLOG</a></li>
       <li><a href="#">CONTACT</a></li>
    </ul>
</nav>


nav{width:100%;position:absolute;background-color:red;}
nav li{float:right;display:inline-block; padding-right:10px;}

这是一个 JSFiddle：

http://jsfiddle.net/gBYZ4/3/

编辑：清理我的 html 和小提琴。标题是否意外浮动。

【讨论】：

感谢您的回答。我认为我的问题是我无法水平滚动固定标题。我添加了 jsfiddle 示例，它演示了我的问题。
是的，这就是问题所在！当某些东西被修复时，您通常无法滚动过去，因为它在浏览器中是“固定的”。您可以将标题更新为与放置它的任何容器“相对”。应该允许滚动：jsfiddle.net/MathiasaurusRex/M3a2y/5

【解决方案2】：

也许你可以试试我在Fixed top bar that scrolls horizontally with the rest of the page 上写的解决方案，这似乎也是你想要的。

【讨论】：

【解决方案3】：

有一个 AJAX 控件可以帮助解决这个问题。您可以使用“AlwaysVisibleControlExtender”。我已经在我的页面中使用了它，它工作得非常好。

下面是asp代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.header{width:100%;height:100px;position:fixed;z-index:1000;}
.content{padding-top:160px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" ScriptMode="Release">
</ajaxToolkit:ToolkitScriptManager>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server" TargetControlID="lnkHome" HorizontalOffset="70" VerticalOffset="60" HorizontalSide="Right" VerticalSide="Top">
</ajaxToolkit:AlwaysVisibleControlExtender>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender2" runat="server" TargetControlID="lnkLogout" HorizontalOffset="20" VerticalOffset="60" HorizontalSide="Right" VerticalSide="Top">
</ajaxToolkit:AlwaysVisibleControlExtender>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender3" runat="server" TargetControlID="lblName" HorizontalOffset="110" VerticalOffset="60" HorizontalSide="Right" VerticalSide="Top">
</ajaxToolkit:AlwaysVisibleControlExtender>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender5" runat="server" TargetControlID="Image1" HorizontalSide="Center" VerticalSide="Top">
</ajaxToolkit:AlwaysVisibleControlExtender>

<asp:Image ID="Image1" runat="server" Height="150px" ImageUrl="~/Image/ABC.jpg" Width="1594px" />
<p style="margin-left: 1240px; width: 187px;">
<asp:Label ID="lblName" runat="server" Font-Size="Small" Font-Names="Arial" ForeColor="White"> 
</asp:Label>
<asp:LinkButton ID="lnkHome" runat="server" Font-Size="Small" ForeColor="White" Font-Names="Arial">Home</asp:LinkButton>
<asp:LinkButton ID="lnkLogout" runat="server" Font-Size="Small" ForeColor="White" Font-Names="Arial">Logout</asp:LinkButton>
</p>

您需要拖放 Alwaysvisible 扩展器控件并如上提供目标控件 ID。希望这会有所帮助。

【讨论】：