jquery - Div 从相对到固定

标签 jquery css

<分区>

我正在尝试使用 CSS 创建一个 float 菜单。当我向下滚动到标题图像时,我希望 div 粘在顶部。我尝试使用“position:fixed”,但这留下了一个空白。无论如何要将菜单包装器 div 从 relative 转换为 fixed on the fly? enter image description here

CSS

/*** Header ***/
#header         { width: 100%; background-color: #000; z-index: 2000; height: 50px; margin: 0 0; border-top: 1px solid #464646; border-bottom: 1px solid #464646; position: fixed}
#topheader      {height: 110px; background: #333; width:970px; margin: 0 auto; position: relative;}
#topheadleft    {float: left; width: 50%; font-family: font1; font-size: 46px; margin-top: 15px; }
#topheadright   {float: left; width: 50%}
.callus { color: #fff; font-size: 20px; font-family: font4; text-shadow: 2px 2px #000}
.hardwork  {color: #fff; font-family: font3; font-size: 12px; text-transform:capitalize;  }
#topheadwrap { background: #333; padding: 0 0; margin: 0 auto;  }
.fixed { position:fixed; top:0; }

HTML

<div id="topheadwrap">
        <div id="topheader">
                <div id="topheadleft">
                        <span style="color:#FF4B45; text-shadow: 2px 2px #000;">East Coast</span><span style="color: #3A8CFF; text-shadow: 2px 2px #000;"> Martial Arts</span><br />
                        <div style="margin-top:-30px; clear: both"><span class="callus">Call Us Now: 845-440-7715</span></div>
                        <div style="margin-top:-35px; clear: both"><span class="hardwork">Hard work, dedication, challenging, authentic</span></div>
                </div>
            <div id="topheadright"></div>
        </div>
    </div>


     <div id="header">

        <div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='has-sub'><a href='?page_id=39#box3'><span>About Us</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>The School</span></a>
         </li>
         <li class='has-sub'><a href='http://www.eastcoastma.com/?page_id=158'><span>Instructors</span></a>
         </li>

      </ul>
   </li>
   <li><a href='?page_id=56'><span>Classes</span></a></li>
   <li><a href='?page_id=15'><span>Schedule</span></a></li>
   <li><a href='#'><span>News</span></a></li>
   <li><a href='?page_id=69'><span>Programs</span></a></li>
   <li class='last'><a href='page_id=29 '><span>Contact</span></a></li>
</ul>
</div>

最佳答案

我相信您正在寻找可拆卸导航

http://code.stephenmorley.org/javascript/detachable-navigation/

关于jquery - Div 从相对到固定,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18093243/

上一篇:html - 是否可以纯粹通过 CSS 将内容从一个 div 移动到另一个?

下一篇:jquery - 将 DOM 元素定位在其他元素之上

相关文章:

javascript - 如果某个类(class)有 sibling ,则添加特定类(class)

jquery - 多向滚动网站

javascript - 当表单提交禁用按键输入时,如何按输入在文本区域上向下行

javascript - jQuery 复制内容并在追加之前从中删除类

jquery - 这些站点如何实现悬停覆盖?

html - 使用 IE11 时如何使 Flex 元素适合其父项的高度?

html - 忽略 CSS 样式类

javascript - CSS div 大小相对于视口(viewport)边界?

jquery - 如何删除 TimeCircle 中的计数器?

java - 如何为下面的复杂 jQuery 选择器编写 cssSelector