监听导航滚动置顶

最新推荐文章于 2021-10-08 15:15:50 发布
最新推荐文章于 2021-10-08 15:15:50 发布
阅读量131 收藏
点赞数
文章标签： javascript ViewUI

1.js代码

/**
 * Created by EDUASK on 2016/5/20.
 */
$(function(){
    //引入id标签;
   var navtive=$("#native");
    //设置导航标签为置顶;
    var offsetTop=navtive.offset().top;
    //定义一个监听高度;
    var scrollHeight=$(document).scrollTop;
    fn(navtive,offsetTop);
    //设置监听事件;
    $(window).scroll(function(){
        fn(navtive,offsetTop);
    });
    //调用方法;
    function fn(navtive,offsetTop){
        var scrollHeight=$(document).scrollTop();
        if(offsetTop>scrollHeight){
            navtive.css("top",offsetTop);
        }else{
            navtive.css("top",scrollHeight);
        }
    }
});

2.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监听导航滚动置顶</title>
    <!--css样式;-->
    <style type="text/css">
       /*添加导航条的样式;
       */
       #native{
            background: blue;
            width: 100%;
            height: 20px;
            color: red;
            position: absolute;
            top: 100px;
           left: 0;
           text-align: center;

        }
    </style>
    <script src="jquery.js"></script>
    <script type="text/javascript" src="监听导航滚动置顶.js">
    </script>
</head>
<body>
<p id="top">ddddd</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<div id="native">欢迎访问我的导航条</div>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<a href="#top">回到顶部</a>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
</body>
</html>
金含
关注
导航栏置顶
蹲在人生路上的那只猫
07-06 1522
1、实现顶部和侧边导航吸顶，侧边导航在footer接触导航底部时被上顶。 2、效果图 3、代码段 顶部导航 顶部导航 顶部导航 顶部导航 顶部导航
VUE 之实现滚动监听 导航栏置顶的效果
夜阑珊妖妖
11-20 679
VUE 实现滚动监听 导航栏置顶的效果 html： <div class="searchsubbox" id="fixedBar" :class="{ fixedBar: isFixed }"> <ul class="searchul"> <li @click="getSonAreaListData" :class="{ on: qu...
滚动条平滑滚动置顶&贴壁滚动层
03-26
NULL 博文链接：https://softwarexiang120.iteye.com/blog/1154551
导航栏滚动
weixin_34185364的博客
11-22 299
在项目，遇到导航栏滚动，滚到到窗口顶部悬停；滚动导航栏的产品，对应的导航栏选中。 html: <div id="nav" > <aclass="xyifu" data-id="yifu" @click="goscrol">衣服</a> <a class="xxiezi" data-id="xiezi" ...
滚动导航栏
amyloverice的博客
03-21 994
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; .container{
滚动置顶
weixin_30449239的博客
04-25 66
$(".top").hide(); $(function () { $(window).scroll(function(){ if ($(window).scrollTop()>window.innerHeight){ $(".top").show(); } else { $(".top").hide(); } }); $(".top").click(fun...
jQuery实现的监听导航滚动置顶状态功能示例
12-12
本文实例讲述了jQuery实现的监听导航滚动置顶状态功能。分享给大家供大家参考，具体如下： 1. js代码 /** * Created by EDUASK on 2016/5/20. */ $(function(){ //引入id标签; var navtive=$("#native"); //...
VUE 实现滚动监听 导航栏置顶的方法
10-18
首先，需要明白实现滚动监听导航栏置顶功能需要掌握的关键技术点包括： 1. 使用Vue的`data`函数来定义组件的状态，包括必要的布局参数和布尔型标志。 2. 在`mounted`生命周期钩子中设置初始状态，并添加滚动事件...
简单版导航滚动
RjLoveGyh的博客
10-14 332
#import “toutiaoViewController.h” #import “shipinViewController.h” #import “beijingViewController.h” #import “cepingViewController.h” #import “daogouViewController.h” #import “xincheViewController.h” ...
网页局部div随滚动条置顶滚动
12-18
网页局部div随滚动条置顶滚动 效果很好，跟普通的滚动不太一样，没有延迟。
监听网页滚动条向上向下滚动
weixin_30414245的博客
09-26 265
<!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" xml:lang="en"><head&g...
滚动视图(切换)
GyhLoveRj的博客
10-11 238
//自己创建类 #import “SlideSwitchExample1.h” #import “TouTiaoViewController.h” #import “ShipinViewController.h” #import “BeijingViewController.h” #import “CepingViewController.h” #import “DaogouViewControl...
滚动导航条
qq_43505774的博客
10-08 119
悬浮导航 滚动置顶
web修理工
11-09 373
告别js用css实现滚动到一定位置时，导航栏置顶的效果。 <div class="nav">这里是导航栏所在的DIV容器。</div> css代码： .nav{ position:fixed; /* 绝对定位，fixed是相对于浏览器窗口定位。 */ top:0; /* 距离窗口顶部距离 */ left:0; /* 距离窗口左边的距离 */ width:100%; /* 宽度设置为100% */ height:40px; /* 高度 *
移动端滚动导航
weixin_30416497的博客
04-19 82
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Swiper中文网基础演示(www.swiper.com.cn)</title> <meta ...
滚动监听 滚屏与菜单联动
lvxiaodi1234的专栏
07-16 481
实现鼠标滚动监听，鼠标滚动与菜单定位的联动。
RecyclerView代码中滚动方法(滚动并置顶)
LinWeiJ的博客
11-01 6770
列表过长,点击浮动按钮使RecyclerView滚动返回置顶 字母索引,快速滑动定位到某一个item并置顶 smoothScrollToPosition smoothScrollBy
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特效
通过上述知识点的介绍，我们可以看出jQuery阅读进度条导航置顶特效是通过结合jQuery库的高效编程和对页面滚动行为的精确监听来实现的。这种特效在提升用户体验的同时，也依赖于对各种前端技术和设计原则的深入理解。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值