Фиксированный заголовок и окна размер

У меня есть фиксированный заголовок с меню навигации на сайте:Фиксированный заголовок и окна размер

#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

Вы можете предоставить код или jsfiddle, чтобы лучше видеть проблему? –

@ jonathan добавил пример jsfiddle. Я надеюсь, что он продемонстрирует мою проблему с прокруткой. – Tamara

Похоже, что ваш навигационный контент имеет положение: абсолютное; право: 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 и скрипку. Если заголовок плыл случайно.

источник

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 Control, который помогает преодолеть эту проблему. Вы можете использовать «AlwaysVisibleControlExtender». Я использовал его на своей странице, и он отлично работает.

Ниже приведен код доступа.

<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 управления расширитель и дать целевой идентификатор элемента управления, как описано выше. Надеюсь это поможет.

источник

2014-12-12 15:40:13 rs1

Фиксированный заголовок и окна размер

ответ

Смежные вопросы