div根据滑动页面位置显示

今天在pc端做了一个页面。表格形式主要是以公司产品价目做的价目单。其中有一个需求导航栏为侧栏展示，根据描点定位方式展示，根据#id定位当前产品

第二个需求是导航栏在滑动页面到一定的位置时显示，浮动在当前位置。在刚进入页面时不会显示。

主要代码是在样式里把导航的div设置为display:none;利用position:fixed把导航浮动定位在设计好的位置。

js控制显示或隐藏导航栏。这里主要利用jquery scroll()方法，触发scroll函数

　　$(function(){

　　　　$(window).scroll(function{ //窗口scroll函数

　　　　　　var top = $(this).scrollTop(); //声明top 获取当前滑动窗口顶部的距离

　　　　　　if( top>计算好的数值){ //判断是否显示

　　　　　　　　$(当前要显示的元素).show();

　　　　　　}else{

　　　　　　　　$(当前要显示的元素).hide();

　　　　　　　　}

　　　　})　

</script>

非常简单的效果。主要学习了scroll()函数。只是随笔记录。

转载于:https://www.cnblogs.com/chendahao/p/7875667.html

div根据滑动页面位置显示相关推荐

DIV层跟随鼠标位置显示提示
虽然IE也带提示功能,只要给title属性赋值,如下代码 <a href="http://chenxp2032.blog.163.com/blog/#" title=&quo ...
.net web 点击链接在页面指定位置显示DIV的问题
.net web 点击链接在页面指定位置显示DIV的问题做了一个网页,放了两个DataList ,一个显示科室,一个显示科室中的人员,由于科室太多,一屏显示不全,为了在页面刷新时记住上次浏览位置,所 ...
页面滚动到某一位置吸顶_vue监听滚动事件某元素吸顶或固定位置显示详解
本文主要为大家详细介绍了vue实现某元素吸顶或固定位置显示,监听滚动事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 最近写了一个VUE的web app项目,需要实现某个部位 ...
获取滑动条位置，动态调整对话框显示位置；为动态添加的button添加click事件
1.获取滑动条位置,动态调整对话框显示位置应用场景:页面上有三个按钮,所处位置高度不同,有的按钮需要移动滑动条才能看到,各个按钮点击后要弹出同一个对话框,为了保证对话框始终显示在当前视野的中央位置, ...
关于使用css3属性：transform固定菜单位置，在滑动页面时菜单闪现抖动的问题
1 myScroll = new IScroll('#h-s-wrapper', { 2 scrollX: true, 3 scrollY: true, 4 probeType: 3, 5 mouse ...
html元素在模块中心显示,DW怎么设置DIV模块在页面中居中 DW如何设置网页打开绝对居中？...
Dreamweaver(DW)中的div层怎么居中 Dreamweaver中div怎么页面居中? Dreamweaver中div怎么页面居中?我写的DIV都是靠左,怎么让它页面居中?在.header的 ...
html 在div 底部显示不出来,html 设置页脚div一直在页面底部
先上代码 //这部分的div的 position 是 fixed 解析: 1.先设置的 height 为 100%: 2.设置 body 的position 为 absolute,因为它里面的 div ...
vue监听滚动事件实现某元素吸顶或者固定位置显示
vue监听滚动事件实现某元素吸顶或者固定位置显示最近写了一个VUE的web app项目,需要实现某个部位吸顶的效果.即,页面往上滑动,刚好到达该部位时,该部分,固定在顶部显示. 1.监听滚动事件 ...
随机位置显示图片不重叠前端实现详细讲解附效果图，代码可直接使用
目录先看看效果图所要实现的功能看看代码 js代码讲解: 下面看看完整代码吧小程序版本完整代码 VUE版本的代码: 先看看效果图所要实现的功能在页面上随机的位置显示随机大小的图片,并且每个图 ...

div根据滑动页面位置显示

div根据滑动页面位置显示相关推荐

最新文章

热门文章