比固定的好, 头代码似乎滚动和消失

简单的位置: 修复, 而不是固定在样式中的网站页眉或导航, 显示在响应滚动的标题淡出和屏幕是更好。响应滚动的标题是网站徽标、菜单、导航栏等, 可以提供更高效、更愉快的用户体验。

为什么应编写响应滚动的标题

有很多人想总是向用户显示页眉和导航栏, 屏幕顶部100px 小于大量的空间, 在您的网站上的博客的徽标和菜单等。这在桌面屏幕上可能无关紧要。然而, 平均而言, 不600px 垂直大小的移动用户总是被至少1/6 的屏幕遮挡 (考虑自己的浏览器导航, 但也约 1/3 ~ 1/4), 用户不能隐藏或控制是相当暴力的 (？)不适。

正因为如此, 你应该为你的方便或导航 (主观思维) 回答, 并始终保持在屏幕顶部的标题。如果需要始终实现的标头, 则当用户滚动或触及内容 (如果要读取内容或编写菜单) 或使用导航功能向上滚动或触摸屏幕时, 页眉将消失, 然后您需要实现再次出现的标题 (当然, 对于希望再次看到上述情况的用户来说, 这种方法可能不方便)。如果您不打算亲自执行此操作, 我们建议您不要只使用位置: 已修复。

3步骤创建响应滚动的页眉

有几种方法可以创建响应滚动的标头。但是, 考虑在任何环境中表示的 web 标准, 我建议使用 jquery, 而不是使用 CSS 之类的方法。Gkkmon (唤醒) 但也尽量不要使用 JavaScript 或 jQuery (因为它比使用基本函数更有可能滞后于速度或资源). 响应滚动的标头是因为 jQuery 方法显示了伟大的 web 标准, 而不会显著降低性能。

使用 jquery
1。导入 JQuery 插件。
2。声明要由导入的 JQuery 插件使用的脚本。
3。您需要触摸 HTML、PHP 和 CSS。

加载 JQuery 插件

用于创建响应滚动的标头的插件是 jquery-2.2.2 版本。加载此插件

<script src="https://code.jquery.com/jquery-2.2.2.js"></script>

.

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>

, 您可以使用此方法, 因为版本的后面有一个 min, 这是相同的代码, 但允许您通过移除空间等更快地加载。

在导入的 JQuery 插件中声明脚本

调用该插件后, 需要声明要使用的脚本。

<script></script>
$ (函数 {) {
    var lastscrolltop = 0,
        三角洲 = 15;
    $ (窗口). 滚动 (函数 (事件) {
        var st = $ (这). ScrollTop ();
        如果 (数学. Abs (Lastscrolltop)<= delta) return; delta)=""></= delta) return;>
        如果 ((St >> Lastscrolltop) &amp; (Lastscrolltop-0)) {
            $ ("元素名称"). CSS ("顶部", "-隐藏高度");
        还
            $ ("元素名称"). CSS ("顶部", "0px");
        }
        Lastscrolltop = st;
    });
});  

在元素名称中放置要控制的元素的类或 ID。通常说. 标头。您应该设置要隐藏的元素的高度或更高, 因为它会在隐藏时用 px 的灯光炸毁屏幕。高度: 如果要控制50px 类名. 页眉

<script></script>
$ (函数 {) {
    var lastscrolltop = 0,
        三角洲 = 15;
    $ (窗口). 滚动 (函数 (事件) {
        var st = $ (这). ScrollTop ();
        如果 (数学. Abs (Lastscrolltop)<= delta) return; delta)=""></= delta) return;>
        如果 ((St >> Lastscrolltop) &amp; (Lastscrolltop-0)) {
            $ (". 报头"). CSS ("顶部", "-50px");
        还
            $ (". 报头"). CSS ("顶部", "0px");
        }
        Lastscrolltop = st;
    });
});  

. 此脚本的内容是 "如果触摸或鼠标滚动检测到屏幕已关闭, 则意味着更改. header to-50px 的 css 顶部, 并在滚动时将. 页眉的 css 顶部更改为 0px."

CSS 指定元素的样式, 顶部指定由位置属性指定的元素屏幕顶部的位置。换句话说, 屏幕的顶部 0px and-50px 来回走。

更改 CSS 以使脚本与 jquery 匹配

最后, 您可以根据 jQuery 设置更改 CSS。

<style></style>
头
位置: 固定;
/* 位置: 修复固定 */
Z 指数:20;
/* 设置适当的 z 索引, 因为它可以被其他元素遮蔽 */
宽度: 100%;
/* 屏幕100% 水平尺寸和 */
身高: 50px;
/* 使页眉垂直 50px */
包装盒大小: 边框框;
过渡: 所有 0.2 s 轻松; 
/* 在出现时消失, 并使其看起来平滑, 无需放置 */
-Webkit-过渡: 所有 0.2 s 轻松;
-Moz-过渡: 所有 0.2 s 轻松;
-O 型转换: 所有 0.2 s 轻松;
}

所有三, 我们可以响应滚动和创建一个伟大的报头, 看起来像它消失了。

已完成的代码

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>

<script></script>
$ (函数 {) {
    var lastscrolltop = 0,
        三角洲 = 15;
    $ (窗口). 滚动 (函数 (事件) {
        var st = $ (这). ScrollTop ();
        如果 (数学. Abs (Lastscrolltop)<= delta) return; delta)=""></= delta) return;>
        如果 ((St >> Lastscrolltop) &amp; (Lastscrolltop-0)) {
            $ (". 报头"). CSS ("顶部", "-50px");
        还
            $ (". 报头"). CSS ("顶部", "0px");
        }
        Lastscrolltop = st;
    });
});  


<style></style>
头
位置: 固定;
Z 指数:20;
宽度: 100%;
身高: 50px;
包装盒大小: 边框框;
过渡: 所有 0.2 s 轻松; 
-Webkit-过渡: 所有 0.2 s 轻松;
-Moz-过渡: 所有 0.2 s 轻松;
-O 型转换: 所有 0.2 s 轻松;
}

如果按照所述设置, 您可以轻松地获得高质量的报头, 从而提供出色的用户体验。这不是什么大不了的, 所以让我们为您的网站或博客24/7 修复它, 始终为浮动报头。我知道我熟悉的网站, 标题始终是固定的和屏幕类似的 "工具栏", 因为它给用户最糟糕的用户体验。