基于jQuery页面滚动的顶部导航显示隐藏
本文演示了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的总体思路,实现网页滚动时的顶部导航显示和隐藏。我希望你能沿着这种方式完成导航和隐藏效果。谢谢你的阅读。