Twitter 喜欢固定标题 [英] Twitter like fixed header

问题描述

如何在页面顶部创建像 Twitter/Facebook 这样的固定标题?

我正在测试这个，但是当我调整浏览器的大小时，完整的设计扭曲了

 
<div id="标志"><a href="#"></a>
<div style="display:inline;"><input style="margin-top:3px;"class="searchbox" type="text"/>

<ul><li><a href="#" title="首页">首页</a><li><li><a href="#" title="个人资料">个人资料</a><li><a href="#" title="个人资料">操作</a><li><a href="#" title="个人资料">邀请好友</a>

<div id="内容">

风格

 html {高度:100%；/* 将 IE 的高度固定为 100% */最大高度:100%；/* 修复其他浏览器的高度 */填充:0;/*去除填充*/保证金:0;/* 去除边距 */背景:#fff;/* 颜色背景 - 仅适用于 IE *//* 隐藏溢出:对 IE5/Mac 隐藏 *//* */溢出:隐藏；/*去掉IE中的滚动条*//* */}身体 {高度:100%；最大高度:100%；最小宽度:960px；溢出:隐藏；填充:0;保证金:0;字体:13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;}#内容 {显示:块；高度:100%；最大高度:100%；溢出:自动；位置:相对；z-索引:3；自动换行:断字；顶部:45px；}#头 {位置:绝对；保证金:0;顶部:0；显示:块；宽度:100%；高度:40px；-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);背景:#333333;背景:-moz-linear-gradient(center top , #736F6E, #111111) 重复滚动 0 0 透明；}#logo a {背景: url("2.gif") 无重复滚动 6px 2px 透明；颜色:#FFFFFF；显示:块；高度:100%；右边距:5px；大纲:中等无；文本缩进:-9999px；宽度:140px；向左飘浮;}.搜索框{-moz-border-radius: 4px 4px 4px 4px;-moz-box-shadow: 0 1px 0 #444444;背景:无重复滚动 0 0 #666666;边框:1px纯黑色；颜色:#CCCCCC；字体:13px Arial，无衬线；填充:6px 5px 4px 26px；宽度:215px；浮动:右；}.searchbox:focus {背景:无重复滚动 0 0 #eeeeee;边框:1px 实心 #999999;}#head ul {保证金:0;填充:0;背景:透明；高度:100%；左边距:60px；填充左:660px;填充顶部:10px;}#head ul li { display:inline;}#head ul li a { padding-left:10px;颜色:#BABABA；文字装饰:无；}#head ul li a:hover { 颜色:#FFFFFF;}

编辑示例http://jsfiddle.net/zerotoinfinite2006/tTmSH/embedded/result/>

解决方案

你的 #head 元素需要有固定的定位，使其浮动在顶部.这将使它始终保持在顶部.尝试使用这个

#head {位置:固定；边距:0px；顶部:0像素；左:0像素；显示:块；宽度:100%；高度:40px；-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);背景:#333333;背景:-moz-linear-gradient(center top , #736F6E, #111111) 重复滚动 0 0 透明；}

How to create a fixed header like Twitter/Facebook on the top of the page ?

I am testing with this but when I am resizing my browser, complete design distorted

  <div id="head">
   <div id="logo">
    <a href="#"></a>
   </div>
   <div style="display:inline;">
    <input style="margin-top:3px;" class="searchbox" type="text"/>
   </div>
 <ul>
  <li>
   <a href="#" title="Home">Home</a> 
  <li>
  <li>
   <a href="#" title="Profile">Profile</a> 
  </li>
  <li>
   <a href="#" title="Profile">Actions</a> 
  </li>
  <li>
   <a href="#" title="Profile">Invite Friends</a> 
  </li>
 </ul>


</div>
<div id="content">
      </div>

Style

     html {
         height:100%; /* fix height to 100% for IE */
         max-height:100%; /* fix height for other browsers */
         padding:0; /*remove padding */
         margin:0; /* remove margins */

         background:#fff; /*color background - only works in IE */
         /* hide overflow:hidden from IE5/Mac */
         /* */
         overflow:hidden; /*get rid of scroll bars in IE */
         /* */
}
body {
         height:100%;
         max-height:100%;
         min-width:960px;
         overflow:hidden;
         padding:0;
         margin:0;
         font: 13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
}
#content {
         display:block;
         height:100%;
         max-height:100%;
         overflow:auto;
         position:relative;
         z-index:3;
         word-wrap:break-word;
         top:45px;
}
#head {
         position:absolute;
         margin:0;
         top:0;
         display:block;
         width:100%;
         height:40px;
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
         background:#333333;
            background: -moz-linear-gradient(center top , #736F6E, #111111) repeat scroll 0 0 transparent;

}
#logo a {
            background: url("2.gif") no-repeat scroll 6px 2px transparent;
            color: #FFFFFF;
            display: block;
            height: 100%;
            margin-right: 5px;
            outline: medium none;
            text-indent: -9999px;
            width: 140px;
           float:left;
}
.searchbox{
            -moz-border-radius: 4px 4px 4px 4px;
            -moz-box-shadow: 0 1px 0 #444444;
            background: none repeat scroll 0 0 #666666;
            border: 1px solid black;
            color: #CCCCCC;
            font: 13px Arial,sans-serif;
            padding: 6px 5px 4px 26px;
            width: 215px;
         float:right;
}

.searchbox:focus {
            background: none repeat scroll 0 0 #eeeeee;
            border: 1px solid #999999;
        }
#head ul {
          margin:0;
          padding:0;
          background:transparent;
          height:100%;
          margin-left:60px;
          padding-left:660px;
          padding-top:10px;
}
#head ul li {  display:inline;}
#head ul li a { padding-left:10px;  color:#BABABA; text-decoration:none;}
#head ul li a:hover { color:#FFFFFF;  }

Edit Sample http://jsfiddle.net/zerotoinfinite2006/tTmSH/embedded/result/

解决方案

Your #head element needs to have fixed positioning to make it float at the top. This will make it stay at the top all of the time. Try using this

#head {
     position:fixed;
     margin:0px;
     top:0px;
     left:0px;
     display:block;
     width:100%;
     height:40px;
     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
     background:#333333;
     background: -moz-linear-gradient(center top , #736F6E, #111111) repeat scroll 0 0 transparent;
}

这篇关于Twitter 喜欢固定标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！