[JavaScript知识库] jquery导航置顶

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> jquery导航置顶 -> 正文阅读

[JavaScript知识库]jquery导航置顶

<!DOCTYPE?html>

<html?lang="en">

<head>

????<meta?charset="UTF-8">

????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">

????<title>Document</title>

</head>

<style>

????*{

????????margin:?0;

????????padding:?0;

????}

????#header{

????????width:?100%;

????????height:?70px;

????????background:?red;

????????z-index:?999;

????}

????#banner{

????????width:?100%;

????????height:?590px;

????????background:green;

????}

????#btmherder{

????????width:?100%;

????????height:?56px;

????????background:?yellow;

????????z-index:?1;??

????}

????.fixnav?{

????????position:?fixed;

????????top:?0px;

????}

????.btmfixnav?{

????????position:?fixed;

????????top:?70px;

????}

????.slideup{

????????-webkit-animation:slideup?.2s?normal;?/*Safari?and?Chrome*/

????}

????@keyframes?slideup

????{

????????from?{top:0px;}

????????to?{top:-70px;}

????}

????@-webkit-keyframes?slideup?/*Safari?and?Chrome*/

????{

????????from?{top:0px;}

????????to?{top:-70px;}

????}

????.slidedown{

????????-webkit-animation:slidedown?.2s?normal;?/*Safari?and?Chrome*/

????}

????@keyframes?slidedown

????{

????????from?{top:-70px;}

????????to?{top:0px;}

????}

????@-webkit-keyframes?slidedown?/*Safari?and?Chrome*/

????{

????????from?{top:-70px;}

????????to?{top:0px;}

????}

????.btmheaderdown{

????????-webkit-animation:btmheaderdown?.2s?normal;?/*Safari?and?Chrome*/

????}

????@keyframes?btmheaderdown

????{

????????from?{top:0px;}

????????to?{top:70px;}

????}

????@-webkit-keyframes?btmheaderdown?/*Safari?and?Chrome*/

????{

????????from?{top:0px;}

????????to?{top:70px;}

????}

????.btmheaderup{

????????-webkit-animation:btmheaderup?.2s?normal;?/*Safari?and?Chrome*/

????}

????@keyframes?btmheaderup

????{

????????from?{top:70px;}

????????to?{top:0px;}

????}

????@-webkit-keyframes?btmheaderup?/*Safari?and?Chrome*/

????{

????????from?{top:70px;}

????????to?{top:0px;}

????}

????

</style>

<body>

????<div?id="header">

????????<p>顶部导航</p>

????</div>

????<div?id="banner">

????????banner

????</div>

????<div?id="btmherder">

????????下部导航

????</div>

????<div>

????????<p>内容</p>

????</div>

</body>

</html>

</script>

????var?t?=?0,?b?=?0;

????console.log($(window).scrollTop());

????

$(window).scroll(function(){

????t?=?$(this).scrollTop();

????//下部导航

????if($(window).scrollTop()>=570){

????????$("#btmherder").addClass('fixnav');

????}else{

????????$("#btmherder").removeClass('fixnav');

????}

????if(b?<?t){

????????console.log('向下滚动中...')

????????//下部导航

????????if($(window).scrollTop()>=570){

????????????$("#btmherder").removeClass('btmheaderdown')

????????????$("#btmherder").addClass('btmheaderup')

????????????$("#btmherder").css('top','0px')

????????}

????????//顶部导航

????????$("#header").removeClass('slidedown')

????????if(?$(window).scrollTop()<=570){

????????????$("#header").addClass('fixnav');

????????}

????????if(?$(window).scrollTop()>=570){

????????????$("#header").addClass('slideup')

????????????setTimeout(()=>{

????????????????$("#header").removeClass('fixnav')

????????????},200)

????????}

????}else{

????????console.log("向上滚动：");

????????//下部导航

????????if($(window).scrollTop()>=570){

????????????$("#btmherder").removeClass('btmheaderup')

????????????$("#btmherder").addClass('btmheaderdown')

????????????$("#btmherder").css('top','70px')

????????}

????????//顶部导航

????????$("#header").removeClass('slideup')

????????if(?$(window).scrollTop()>=70){

????????????$("#header").addClass('slidedown');

????????????????$("#header").addClass('fixnav');

????????}

????????if(?$(window).scrollTop()==0){

????????????$("#header").removeClass('fixnav')

????????}

????}

????setTimeout(function(){

????????b?=?t

????},?0)

})

????setTimeout(()=>{

????????if($(window).scrollTop()>=570){

????????????$("#btmherder").css('top','0px')

????????}

????},200)

</script>

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-10-08 11:42:45 更:2021-10-08 11:42:59

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/23 22:49:06-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码