窗口固定位置顯示元素,當頁面高度大于某高度,并且頁面向下滾動時,顯示該元素;當頁面位置小于某高度,或者頁面向上滾動時,隱藏該元素。
先給大家展示下效果圖:
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();});});
以上所述是小編給大家分享的JS實現隨頁面滾動顯示/隱藏窗口固定位置元素的相關知識,希望對大有所幫助!
新聞熱點
疑難解答