1

我最近使用 CSS 在我的网站上实现了一个浮动（？）标题，但我想让特定页面只有一个正常的标题，因为某些页面的性质不保证它。将来（或者可能同时？）如果有意义的话，我想为用户提供切换浮动的选项。

（请耐心等待，我仍然是 PHP/Javascript 新手！）

因此，当前页眉将在窗口顶部保持可见，即使用户向下滚动页面，在所有页面上也是如此。但是，有些页面不需要浮动标题。对于其他需要的页面，我希望用户可以选择切换浮动标题，因为有些人可能不需要快速访问标题中的工具链接。理想情况下，右上角会有一个持续可见的 CSS 按钮，上面写着“查看/隐藏导航栏”或“停止关注我！” （我现在更关心实际功能。）所以无论标题是可见还是隐藏，切换按钮总是需要可见。

我是否会让用户选择在所有页面上切换标题（即使在没有浮动标题的页面上），我不知道。取决于实施的难易程度。

到目前为止，我这样做是为了在所有页面上显示标题：

    #header
{
    position:fixed;
    width:914px;
    z-index:1;
}

    #rest of header content....

在每个 .php 页面上，我将标题背景和导航栏放在 . 到目前为止，一切都很好。

使用 PHP 或 Javascript，如何引入切换功能？

4

3 回答 3

2

这很简单——在一个复选框或你喜欢选择的任何形式的用户设置实现中——让它激活你将要创建的 PHP 函数。该函数（不必是函数，请注意）将保存用户对标题的偏好。您可以通过以下方式执行此操作：

  1. 会话- 将在浏览器关闭时重置
  2. Cookies - 将在浏览器关闭时或在特定时间重置，具体取决于您的操作
  3. 数据库- 只有当你告诉它时才会重置 - 以及其他用户偏好（你熟悉动态内容吗？）

假设您不希望数据过载并且您不强迫人们加入您的网站（并且不想为每个访问者打开任意临时帐户） - 我会说使用cookie并将它们设置为过期日期远非现在。PHP 有一个内置的 cookie 函数：

setcookie ($name , $value, $expire);

例如：

setcookie('header_float', 'true', time() + (365 * 24 * 60 * 60));

将设置一个 cookie 从现在起一年后过期。$_COOKIE['header_float']您可以使用超全局变量访问此 cookie 。

<div id="header" <?=($_COOKIE['header_float']) ? ' class="float"' : ''?>>
...
</div>
于 2012-07-08T11:36:55.170 回答
1

一个简单的方法是设置一个类 on <body>or even <html>：

<body class="fixed-header">

对比

<body class="">

并让您的 CSS 对该类做出反应。

.fixed-header #header {
    position:fixed;
    width:914px;
    z-index:1;
}

（无论您是通过 PHP 还是 Javascript 设置该类。）

于 2012-07-08T11:29:33.090 回答
1

代码对你来说当然会有所不同，但下面是一种可以实现的方式。div基本上，如果它是一个不想有“浮动”标题的页面，PHP 会添加一个类。

<div id="header"<?php echo in_array($page,array('ignore-page','ignore-page2')) ? ' class="static"' : ''; ?>>
    blah
</div>

CSS：

#header
{
    position:fixed;
    width:914px;
    z-index:1;
}

#header.static {
    position: absolute;
}
于 2012-07-08T11:30:47.760 回答