html 下拉到一定位置,浏览器向下滚动到一定位置继续滚动时,侧边导航固定在页面顶部,再滚动到一定位置时页面再向下滚动侧边导航不再固定。这种效果怎么实现呢...

1.浏览器向下滚动到一定位置继续滚动时,侧边导航固定在页面顶部,再滚动到一定位置时页面再向下滚动侧边导航不再固定。页面向上滚动到一定位置继续滚动时,侧边导航保持在原来位置。这种效果怎么实现呢

2.、

参考代码:

$(function(){

//获取要定位元素距离浏览器顶部的距离

var navH = $(".search_box").offset().top;

//滚动条事件

$(window).scroll(function(){

//获取滚动条的滑动距离

var scroH = $(this).scrollTop();

//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定

if(scroH>=navH){

$(".search_box").css({position: 'fixed',top:0});

}

else if(scroH

$(".search_box").css({position: "static"}); }

})

})

但是此代码无法实现滚动到一定位置时页面再向下滚动侧边导航不再固定。

希望侧边只在在主题部分。但是事实上继续向下滚动直到到底部,侧边导航都会出现在屏幕上。

bVxDBk

4.代码实现效果:

初始位置

bVxDWy

向下滚动

1ba31992dba5ca43d4110730c8693915.png

向上滚动到一定页面

bVxDWy

需要实现效果:

初始位置:

bVxDzt

向下滚动

bVxDzE

继续向下动(未实现)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/563130.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机专业的英语文献,计算机专业英语论文参考文献

bentuoguai高分答主08-08TA获得超过1351个赞关于计算机信息管理系统,可以参考了:)~~Enterprise computer network management information system(MIS) is gradually use, it is the stage sign of our country of production power development, is the…

计算机博士与管理科学与工程博士,管理科学与工程一级学科博士点简介

管理科学与工程是管理学门类中的一级学科,侧重于研究同现代生产经营、科技、经济和社会等发展相适应的管理理论、方法与工具,应用现代科学方法与科技成就来阐明和揭示管理活动的规律,以提高管理的效率。东华大学早在1959年设立工业管理工程本…

东莞市商业学校计算机平面设计在哪个校区,东莞市商业学校

东莞市商业学校开设专业:学校开设计算机动漫与游戏制作、计算机平面设计、计算机网络技术、电子技术应用、学前教育、民族音乐与舞蹈、会计电算化、金融事务、市场营销、电子商务、国际商务、汽车整车与配件营销等12个专业。学校以就业为导向,以现代服务…

互联网物流是计算机类吗,那些常常被误解的大学专业,亲戚眼中的修电脑送快递,网友:想哭...

原标题:那些常常被误解的大学专业,亲戚眼中的修电脑送快递,网友:想哭随着时间的过去,开学季也已经越来越近了,那些学生即将又要面临繁重的学业了,但是对于大学生来说还是会轻松很多,…

mac mail 删除邮件服务器,如何从Mac OS X中的邮件中删除所有电子邮件 | MOS86

如果您在Mac上使用Mail应用程序,那么您很可能会定期删除您确定为不必要的垃圾邮件,或者根本不需要这些电子邮件。通常这是一个选择性过程,其中特定的电子邮件消息根据需要被删除,但在某些情况下,您可能需要全部删除并删…

win7关闭系统索引服务器,win7系统如何关闭索引服务

#索引##如何关闭索引##win7#很多用户朋友都知道,打开win7系统的索引服务,会占用一定的电脑系统资源,换句话说,如果我们不需要使用索引服务的话,最好把它关闭,免得影响我们对设备的体验感觉。那么如果关闭iw…

python鼠标移动轨迹_鼠标的另一种选择,肯辛通轨迹球能否改变固有的使用习惯?...

【引言】鼠标,作为电脑甚至是现在Pad的外接输入设备,其地位从1964年雏形诞生的那一刻起便从未被撼动,哪怕是thinkpad的小红点以及外接触摸板的出现。鼠标最早只是一个装有两个滚轮(是圆盘型滚轮而不是后来的球形滚轮)小木头盒子里面&#xff…

在家怎么看公司服务器上的文件,怎么查看云服务器上的文件

怎么查看云服务器上的文件 内容精选换一换华为云帮助中心,为用户提供产品简介、价格说明、购买指南、用户指南、API参考、最佳实践、常见问题、视频帮助等技术文档,帮助您快速上手使用华为云服务。安装完操作系统后的临时云服务器需要进行相关配置&#…

c++thread里暂停线程_Java线程的 6 种状态

作者:( •̀ ω •́ )y出处:https://www.cnblogs.com/laishenghao/p/13972421.html一、线程状态的枚举Java的线程从创建到销毁总共有6种状态。这些状态被定义在Thread类种的内部枚举 State 中,分别如下:1、NEW:初始状态。线程实例已创建&…

hp服务器装xp系统,教你惠普笔记本一键装xp系统的方法

前几天小编闲来无事就跑到网站底下查看粉丝朋友给小编我留言询问的问题,还真的就给小编看到一个问题,那就是惠普笔记本xp系统安装方法,其实小编我有一个十分简单的安装方法可以提供给大家,大家一起来跟小编我一起看看吧。1、首先我…

外链引入css有哪些方式_快速收录的外链操作技巧

外链似乎还依然是大部分行业获取关键词排名的主要方法,现在早已经过来外链是王道的时代。但是对于处于关键词排名前期的新站,外链的作用依然很大。如何才能让我们发布的外链快速被收录然后被计入关键词排名呢?有如下6点需要注意的:一、寻找收…

华为路由器A1如何设置虚拟服务器,华为路由器A1如何设置虚拟服务器

华为路由器A1如何设置虚拟服务器 内容精选换一换当您在使用VPC的路由表功能时,需要在弹性云服务器上部署SNAT,使得VPC内其他没有绑定EIP的弹性云服务器可以通过它访问Internet。该配置对VPC内所有子网生效。已拥有需要部署SNAT的弹性云服务器。待部署SNA…

ad域同步其他ldap账号_域渗透——普通用户权限获得DNS记录

0x00 前言在之前的文章《域渗透——DNS记录的获取》介绍了域渗透中获得DNS管理员权限后获取DNS记录的方法,而更普遍的情况是只有域普通用户的权限,也需要获得DNS记录。本文将会参考公开的资料,整理域普通用户获得DNS记录的方法,修…

dom4j实现为list添加父节点_Heap 堆的实现

堆(数据结构)什么是堆堆(Heap)是计算机科学中一类特殊的数据结构的统称。堆通常是一个可以被看做一棵完全二叉树的数组对象堆的性质这种用数组实现的二叉树,假设节点的索引值为index,那么:节点的左孩子节点是 2*index1,节点的右孩…

acer软件保护卡清除工具clear_如何清除 APT 缓存来回收宝贵的磁盘空间 | Linux 中国...

导读:在本教程中,我将解释什么是 APT 缓存、为什么会使用它、为什么你要清理它,以及关于清理 APT 缓存你应该知道的其他事情。本文字数:2132,阅读时长大约:3分钟https://linux.cn/article-12787-1.html作者…

检测正常和不正常图_医生提醒:激素正常不等于内分泌正常,带你走出内分泌失调误区...

内分泌失调是女性常见的问题,特别是压力较大的都市女性,常常因为内分泌失调而导致月经紊乱,同时皮肤状态也变得糟糕,让她们很是心烦。一旦怀疑自己是内分泌失调,不少女性都会进行相应的激素检测,但如果检测…

antd 判断input输入内容是否大于_Python基础语法 | 代码规范amp;判断语句amp;循环语句...

Python基础语法代码的执行顺序从上到下从左到右代码规范模块名,包名,普通数据量一般小写字母,多个单词之间用 _ 连接不要用系统定义的名称,具有特殊意义的表示符,如:doc,txt之类的每行代码不易过长单个字母…

小米手环导出心率_这个功能有意思,小米11支持指纹检测心率,没有手环也不怕...

原标题:这个功能有意思,小米11支持指纹检测心率,没有手环也不怕昨晚,小米发布了新一代数字旗舰小米11,在处理器和屏幕等方面都做了升级,相比于这些重点,有一项新功能的介绍篇幅不是很多&#xf…

用单片机测量流体流速的_金属管转子流量计基本测量原理

金属管转子流量计的主体构件是一根金属材质的锥形测量管,测量元件是一个内置磁钢的转子(或称浮子),故而得名。金属管的锥度通常在4左右,下端截面积略小于上端;转子直径略小于金属管内径,形成一个…

css如何调整红心样式_在JavaScript应用程序中包含CSS的多种方法「渡一」

原文链接:https://css-tricks.com/the-many-ways-to-include-css-in-javascript-applications/,作者:Dominic Magnifico如有翻译不准确,请多指正。欢迎来到这个在前端开发领域极具争议性的话题!我相信读到这篇文章的大…