jquery导航置顶

于 2021-10-07 23:52:00 发布
阅读量245 收藏
点赞数
分类专栏： Jquery 文章标签： html5 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36818077/article/details/120643803
版权

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

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

        <p>内容</p>

    </div>

</body>

</html>

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>

</script>

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

小白其实并不白
关注
专栏目录
jquery实现滑动置顶效果
weixin_45610554的博客
07-09 329
样式： .top{ width:100%; height:100px; background-color:skyblue; } .nav{ width:100%; height:50px; background-color:pink; } .main{ ...
导航栏置顶
蹲在人生路上的那只猫
07-06 1522
1、实现顶部和侧边导航吸顶，侧边导航在footer接触导航底部时被上顶。 2、效果图 3、代码段 顶部导航 顶部导航 顶部导航 顶部导航 顶部导航
jquery实现元素置顶
03-05
jquery实现元素置顶，可以实现任意的元素置顶或者距离顶部多少像素
jQuery置顶导航
weixin_44269204的博客
05-12 287
Html的代码 <body> <div class="logo_bar">顶部 logo</div> <div class="menu">置顶菜单</div> <div class="menu_pos"></div> <div class="down_con"> <p sty...
jQuery 实现置顶效果
weixin_30613727的博客
04-24 306
本身置顶效果是比较简单的 但是还是让自己花了不少时间 。 主要是没有考虑的jQuery的版本问题 。公司用的jQuery版本比较古老。和现在的版本有个区别。自己经常用的jQuery选择器不会吧选出来的dom元素作为object对象 。公司的版本会把选出来的dom元素作为一个数组。 这两个版本的after 方法有点不同。数组状态是不允许$(a).after($(a));这样会使$(a)元素消失。...
jquery 置顶按钮
DevOps海洋的渔夫@专栏
04-19 967
需求 返回到页面的最上方。这个功能在简书阅读的时候右下角也有，如下： 点击这个按钮，直接就返回到最上方了。 当文档达到最上方的时候，置顶按钮消失。 编写基本HTML\CSS 这个图片我用了阿里的矢量图库，如果不懂如何使用的朋友，可以访问iconfont阿里巴巴矢量图标库从注册到使用。 再写一些p段落，用来形成滚动条，如下： 好...
实现置顶功能jQuery
wuzhongchao的专栏
01-04 1286
HTML： 去顶部 CSS： .fl{ display:block; float:left; width:50px; height:50px; text-align
jquery导航置顶特效代码
03-20
jquery导航置顶非常简约的一款js导航
jquery导航置顶.zip
07-04
jquery导航置顶非常简约的一款js导航
jQuery阅读进度条导航置顶特效
07-24
在网页设计中，用户体验是至关重要的，而"jQuery阅读进度条导航置顶特效"就是一种提升用户阅读体验的优秀技术。这种特效结合了jQuery库、进度条元素和导航置顶功能，为用户提供了一种直观的方式来跟踪他们在长文章或...
jquery导航
03-26
NULL 博文链接：https://hugang357.iteye.com/blog/1151880
jQuery阅读进度条导航置顶特效.zip
最新发布
10-08
标题中的"jQuery阅读进度条导航置顶特效.zip"指出，这个压缩包包含了一个使用jQuery实现的阅读进度条导航，并且该导航在页面滚动时会保持在顶部，这通常被称为“固定顶栏”或“粘性导航”。jQuery是一个广泛使用的...
JQuery置顶
u012425345的专栏
04-08 934
$(function(){         //置顶按钮显示/隐藏实现         $(window).scroll(function(){             var w_height = $(window).height();//浏览器高度             var scroll_top = $(document).scrollTop();//滚动条到顶部的垂直高度  
jquery制作置顶菜单
muli
03-14 493
jquery制作置顶菜单
jquery固定在顶部的导航菜单
xiaozhen0610的博客
07-07 290
体验效果:http://hovertree.com/texiao/jquery/6.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <m...
jQuery插件StickUp实现网页导航置顶
12-10
实用的jQuery网页元素固定导航置顶插件StickUp，简单的jQuery插件，实现网页元素固定，如导航固定让其总是保持在视图中可见，在one-page页面中就可以看出效果，大家可以研究研究。 使用方法： 1.加载插件和jQuery ...
jquery置顶效果
06-01
NULL 博文链接：https://hualom.iteye.com/blog/1107723
jquery中的置顶，置底，向上，向下的排序功能
weixin_30929195的博客
01-18 535
css .selectedLi{background: #f0ad4e;color:#fff;} html部分 <ul class="seetSelect2" id='sysAllSet'> 　　<li value="1" index='1'>集团考核保障</li> 　　<li value="2" index='2'>业务全景监...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值