窗口固定位置显示元素，当页面高度大于某高度，并且页面向下滚动时，显示该元素；当页面位置小于某高度，或者页面向上滚动时，隐藏该元素，下面通过本文给大家介绍js实现随页面滚动显示/隐藏窗口固定位置元素，需要的朋友参考下吧
窗口固定位置显示元素，当页面高度大于某高度，并且页面向下滚动时，显示该元素；当页面位置小于某高度，或者页面向上滚动时，隐藏该元素。
先给大家展示下效果图：
1.html
<p id="selected-case-count"><span class='form-control'>已选: <span class="casecount">0</span></span></p>
2.css
p#selected-case-count{position:fixed; /*固定元素位置*/top:2px; /*距顶端举例*/right:40px; /*距右侧位置*/color:red; }
3.js
$(function() {$("#selected-case-count").hide();});var pretop=0;var currtop=0;$(function () {$(window).scroll(function(){currtop=$(window).scrolltop();if(currtop<pretop){$("#selected-case-count").fadeout(200);}elseif ($(window).scrolltop()>600){$("#selected-case-count").fadein(500);}else{$("#selected-case-count").fadeout(500);}pretop=$(window).scrolltop();});});
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
使用vue2如何实现三级联动
在javascript中如何使用单链表和循环链表
如何解决手机浏览器顶部下拉刷新的问题
以上就是利用js实现随页面滚动显示/隐藏窗口固定位置元素的详细内容。