0

所以这似乎是一个愚蠢的问题。我可能做错了，所以如果有人可以提出另一种方法，我很乐意尝试一下。

我有一个用 Zurb Foundation 4 构建的固定导航栏

<div class="fixed">
<nav class= "top-bar">
<ul class="title-area">
  <li>
    <h2><%= link_to image_tag("officialLogo-100x197.png", :size => "100x197", :class =>  "logo" ) + "AppDomum",  root_path, :class => "textlogo" %></h2>
  </li>

  <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>

<section class="top-bar-section">

<ul class="right">

  #links ..... 

</ul>

为标题显示的图像大于导航栏。我实际上喜欢它挂在导航栏上，并且我有一个媒体查询设置以在较小的屏幕上将其删除，因此它不会挂在内容上。

问题：<div class= "fixed">将导航栏和图像一直包裹在整个页面中。因为图像挂在导航栏下方，所以它后面的任何内容都不可点击。页面的整个顶部是不可点击的。对于表单，我无法选择要编辑的文本框。因为导航栏是固定的，所以它会根据您滚动的距离影响整个页面。有没有办法让它们固定但没有固定标签占据所有空白空间？还有另一种方法可以做到这一点吗？

我搞砸了固定的 div

4

2 回答 2

0

尝试添加position: relative;到您的图像。

于 2013-04-11T22:54:14.133 回答
0

经过大量研究，我确实解决了这个问题。这是解决问题的代码，或者至少是我为了得到我想要的东西而拼凑起来的代码。这是导航栏。

<div class="fixed">
<nav class= "top-bar">
<ul class="title-area">
  <li>
    <h2><%= link_to "AppDomum",  root_path, :class => "textlogo" %></h2>
  </li>

  <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>

<section class="top-bar-section">

<ul class="right">

  #links ..... 

</ul>
</section
</nav>
</div>
<div class= "fixed-icon">
<%=link_to image_tag("officialLogo-100x197.png", :size => "100x197", :class => "logo" ), root_path %>
</div>

我将图标和文本分开，但将它们都保留为主页的链接。给人一种错觉，即它们都是标题的一部分。有一个媒体查询可以隐藏图像并删除标题上的边距。这是CSS。我基本上搜索了该站点的 html 和 css 文件，直到找到“固定”类并偷走了 css 修改，然后将宽度更改为很小，这样它就不会掩盖其他所有内容。

@media only screen and (min-width: 768px) {

.title-area {
  margin-left: 6em;
}

}

.fixed-icon {
@extend .hide-for-small;
    width: 10%;
  left: 0;
  position: fixed;
  top: 0;
  z-index: 99;
}

.title-area {
  padding: 5px 5px;
  font-weight: bold;
  letter-spacing: -1px;

}
于 2013-04-12T06:42:06.837 回答