css - 使 Joomla header 静态以便始终可见

标签 css scroll header css-position fixed

一位客户问他是否可以将他网站的标题区域设为静态以便始终可见?

我正在使用 Eris 模板:http://hogash-demos.com/themeforest/?theme=eris_joomla

我的网站是:http://www.negotiumrecruitment.co.uk/dev

带有 Logo 、联系信息和导航的顶部区域以及下面的线都希望留在原处,当滚动时,整个站点向上移动,顶部区域始终保持可见。

提前谢谢你。

保罗沃克

最佳答案

你可以试试:

#rt-header {
  position: fixed;
  top: 0;
  width: 100%;
}

An element with a fixed position is positioned relative to the browser window, and will not move even if the window is scrolled

来源:http://www.w3schools.com/css/css_positioning.asp

编辑:看到您证明的网站,您还需要更改您的 #rt-logo CSS 规则。它目前是“绝对”的,应该改为“固定”:

#rt-logo {
  display: block;
  position: fixed; /* Instead of 'absolute' */
  left: 50%;
  top: 0;
  margin-left: -470px;
  z-index: 9999;
}

这是因为您的 Logo 位于模板中的页眉之外。通常它会在标题内,您不需要它。

关于css - 使 Joomla header 静态以便始终可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29163621/

相关文章:

html - 左侧固定侧边栏菜单,顶部固定标题

image - 通过 http 加载的图像的大小(宽度、高度)

css - WordPress 字体系列 : "上存在 CSS 错误

android - 线性布局 - 只有 RecyclerView 滚动

JQuery-顺时针和逆时针旋转一个div

javascript - HTML 元素向下滚动直到达到特定值

matlab - 在命令窗口中禁用自动滚动

php - 在php中将数据库导出为pdf文件

javascript - 有一个 DIV 'stick' 用于 x 数量的卷轴

java - 在 thymeleaf 中使用 Java 和 Spring 时,如何包含我的 css 文件?