本文演示了jQuery滚动时顶部导航
显示的隐藏效果代码,供大家
参考:
运行效果的
截图如下:
具体代码如下:
介绍核心文件 构建HTML,margint,它是建立在以div出现滚动条,没有实际
作用。
这是顶部导航条
滚动查看效果滚动
写CSS
。顶部标题{
背景:# e74c3c;颜色:白色;
字体大小:24px;填充:5px;
文本对齐:中心;
位置:固定;左:0;最高:0;宽度:100%;过渡:,};}
。隐{顶:- 90px;}
顶:0。显示{;Z指数:9999;}
过渡:top.5s是最高头衔的定义;它是指在the.5s
动画时间的前方向值的变化。如果加上隐藏的类,最高头衔将缓冲0动画上- 90px在0.5秒之内。
写js
$(
函数(){())
无功winheight = $(document)的ScrollTop();
$(窗口)。滚动(函数(){)
无功scrolly = $(document)(。scrollTop); / /得到垂直滚动的距离,即滚动数
如果(scrolly > 550){ / /如果滚动距离大于550px隐藏或
删除隐藏类
$('。最高头衔的)。AddClass('hiddened);
}
{其他
$('。最高头衔的)。RemoveClass('hiddened);
}
如果(scrolly > winheight){ / /如果没有滚动到顶部,删除或添加显示
类型 $('。最高头衔的)。RemoveClass('showed);
}
{其他
$('。最高头衔的)。AddClass('showed);
}
});
});
以上是一个基于jQuery的总体思路,实现
网页滚动时的顶部导航显示和隐藏。我希望你能沿着这种方式完成导航和隐藏效果。谢谢你的阅读。