我目前正在重新设置Wordpress主题的风??格, 并希望实现一个固定的导航栏。我设法通过将position:fixed添加到标题区域来实现这一点。
由于菜单首先很大, 因此我想在向下滚动时将其缩小, 即当用户访问网站时, 菜单的高度为75像素, 而在向下滚动时则减小为40-50像素左右。
快速素描:http://i.imgur.com/iICQkfF.png
关于如何实施此建议?
【向下滚动时调整菜单大小】菲利普干杯
#1由于你询问的是WordPress, 我想你可以使用jQuery。
你只需要侦听$(window).scroll()事件并根据用户滚动了多少即可调整菜单大小(你可以通过$(window).scrollTop()获取)。快速演示:
http://jsfiddle.net/FMypW/1/
(这不是实际的菜单, 而只是显示功能的工作)
#2
var moved = false;
$(window).scroll(function(){ if( $(this).scrollTop() <
2000 ){
$('.header').height(200 - (200 * $(this).scrollTop() / $('body').height()));
if (!moved &
&
$('.header').height() <
170)
{
$('.header').animate({top:"-40px"});
moved = true;
} else if (moved &
&
$('.header').height() >
170)
{
$('.header').animate({top:"0px"});
moved = false;
}}});
这是演示此外, 你可能想查看这些教程, 而不是自己发明轮子:
如何创建大小调整菜单栏滚动时的动画大小调整标题
推荐阅读
- 自适应网站只能在台式机上运行,??而不能在移动设备上运行
- #私藏项目实操分享# 什么是 SAP HANA XS JavaScript
- netty系列之:让TCP连接快一点,再快一点
- 万字详解实时计算一致性机制(对比Flink和Spark)
- MySQL 8.0 配置mysql_native_password身份验证插件的password
- nginx location配置详细解释
- Filebeat相关的操作和配置
- 自动化测试markdown文章-标题
- Linux基础(shell::日志筛选 #私藏项目实操分享#)