博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js 浏览器滑动页面滚动条时,获取元素距离浏览器顶部距离,并且固定浮动导航...
阅读量:7227 次
发布时间:2019-06-29

本文共 1172 字,大约阅读时间需要 3 分钟。

 浏览器滑动页面滚动条时,获取元素距离浏览器顶部距离,动态获取。

举个栗子:

这是要循环的div,要菜单$(".mdtit") 在$(".box")距离顶部小于20px时保持浮动。

学校介绍

 

.nav_index_fix {
position: fixed; left: 0; top: 0;}

 

$(function(){        $(window).scroll(function(){            $(".box").each(function(){                //所有需要计算距离浏览器顶端高度的元素                var scrollTop = $(window).scrollTop();// 网页被卷起来的高度                var nap_top = $(this).offset().top;        //页面元素距离文档顶端高度距离                if(nap_top-scrollTop < 20){              //元素距离浏览器顶部高度                    $(".mdtit").removeClass("nav_index_fix");                          $(this).children(".mdtit").addClass("nav_index_fix");                }else{                    $(this).find(".mdtit").removeClass("nav_index_fix");                }            })        });    });

注意:声明的变量必须写在each循环里面,当滑动时才能动态获取当前元素距离顶部的距离

转载于:https://www.cnblogs.com/i6010/articles/6543067.html

你可能感兴趣的文章
Android开发 Firebase动态链接打开APP
查看>>
基于 HTML5 Canvas 的 3D 模型贴图问题
查看>>
让技术不要成为“背锅侠”!
查看>>
dubbo源码分析系列——dubbo的SPI机制源码分析
查看>>
表格单元格td设置宽度无效的解决办法
查看>>
防止视频资源被下载
查看>>
都是并发惹的祸
查看>>
eclipse实现JavaWeb项目 增量打包
查看>>
面试题系列一之 程序生命周期
查看>>
设计模式——观察者模式:气象监测应用
查看>>
NSUserDefaults简介及如何使用 NSUserDefaults 存储自定义对象
查看>>
IntelliJ IDEA搭建SpringBoot
查看>>
深入浅出iOS事件机制
查看>>
hadoop理解
查看>>
Oracle——18用户、角色和权限信息的视图总结
查看>>
WordPress 中的 Debug 模式(调试模式)
查看>>
node下使用express框架,ejs模板引擎
查看>>
搜索:文本的匹配算法
查看>>
Fedora 17 LibreOffice 办公套件的安装与汉化
查看>>
scrollview不充满屏幕的原因
查看>>