Maison > interface Web > tutoriel HTML > 随页面滚动显示/隐藏窗口固定位置元素_html/css_WEB-ITnose

随页面滚动显示/隐藏窗口固定位置元素_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:26:00
original
1837 Les gens l'ont consulté

0.效果

窗口固定位置显示元素,当页面高度大于某高度,并且页面向下滚动时,显示该元素;当页面位置小于某高度,或者页面向上滚动时,隐藏该元素。

1.html

<p id="selected-case-count"><span class='form-control'>已选: <span class="casecount">0</span></span></p>
Copier après la connexion

2.css

p#selected-case-count{      position:fixed;  /*固定元素位置*/      top:2px;  /*距顶端举例*/      right:40px; /*距右侧位置*/      color:red; }
Copier après la connexion

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();    });});
Copier après la connexion

 

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal