Question

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

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

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

这是截断标题的图像：

cut off header

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

enter image description here

如何在调整大小后使标题看起来很好？

更新：

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

我在标题中放了3个标题。当您加载小提琴时，您将只看到其中的2个。第三个是不可见区域。我认为你应该只是水平滚动，固定的标题将滚动与页面的其余部分。但固定标题不会滚动，你看不到标题＃3。

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

Answer 1

您的导航内容看起来像是位置：绝对;右：0像素;即使浏览器调整大小，也会导致导航尽可能正确。

如果你创建一个li和float：right，显示：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和小提琴。如果标题意外浮动了。

Answer 2

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

Answer 3

有一个AJAX控件有助于克服这个问题。您可以使用＆＃34; AlwaysVisibleControlExtender＆＃34;。我已经在我的页面中使用它，它完全正常。

以下是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。希望这会有所帮助。

修复了标题和窗口调整大小

3 个答案: