固定頭和窗口大小調整

我有導航菜單網站上的固定頭：固定頭和窗口大小調整

#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

如何在調整大小後使頁眉看起來不錯？

UPDATE：

我試圖重新上jsfiddle我的問題。爲了模仿窄窗口，我設置了較大的頁面寬度和頁眉寬度（我的問題只有在用戶調整窗口大小並縮小窗口時纔會出現）。

我把3個標題放在標題中。當你加載小提琴時，你只會看到其中2個。第三個是可視區域。我認爲你應該水平滾動和固定標題將滾動頁面的其餘部分。但固定標題不滾動，您看不到標題＃3。

換句話說，我需要固定標頭像任何其他元素水平滾動。

來源

2013-11-01 Tamara

你能提供一個codepen或jsfiddle來更好地看到問題嗎？ –

@jonathan補充了jsfiddle的例子。我希望它能展示我的滾動問題。 – Tamara

看起來像您的導航內容是位置：絕對;右：0像素;這會導致瀏覽器在調整瀏覽器大小時儘可能地向右移動。

如果你創建一個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和小提琴。如果標題漂浮在正確的位置上。

來源

2013-11-01 15:10:55

感謝您的回答。我認爲我的問題是我無法水平滾動固定標題。我添加了jsfiddle示例，這證明了我的問題。 – Tamara

是的，那會是問題！如果某些內容已修復，則通常無法滾動瀏覽它，因爲它在瀏覽器中「固定」。你可以更新標題爲「相對」它的任何容器，它應該允許滾動：http://jsfiddle.net/MathiasaurusRex/M3a2y/5/ –

也許你可以試試我在Fixed top bar that scrolls horizontally with the rest of the page上寫的解決方案，這似乎也是你想要的。

來源

2013-11-05 13:13:54 aaronps

有一個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如上。希望這可以幫助。

來源

2014-12-12 15:40:13 rs1

固定頭和窗口大小調整

回答

相關問題