简单的位置: 修复
, 而不是固定在样式中的网站页眉或导航, 显示在响应滚动的标题淡出和屏幕是更好。响应滚动的标题是网站徽标、菜单、导航栏等, 可以提供更高效、更愉快的用户体验。
为什么应编写响应滚动的标题
有很多人想总是向用户显示页眉和导航栏, 屏幕顶部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) & (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) & (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) & (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 修复它, 始终为浮动报头。我知道我熟悉的网站, 标题始终是固定的和屏幕类似的 "工具栏", 因为它给用户最糟糕的用户体验。