jquery导航置顶

最新推荐文章于 2023-05-15 16:30:14 发布

小白其实并不白

最新推荐文章于 2023-05-15 16:30:14 发布

阅读量195

点赞数

分类专栏： Jquery 文章标签： html5 html css

本文链接：https://blog.csdn.net/qq_36818077/article/details/120643803

版权

Jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<head>

<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>

banner

</div>

下部导航

</div>

<div>

</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>

小白其实并不白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jquery导航置顶

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><style>*{...
复制链接

扫一扫