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

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

WBOY
Freigeben: 2016-06-24 11:26:00
Original
1837 Leute haben es durchsucht

0.效果

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

1.html

<p id="selected-case-count"><span class='form-control'>已选: <span class="casecount">0</span></span></p>
Nach dem Login kopieren

2.css

p#selected-case-count{      position:fixed;  /*固定元素位置*/      top:2px;  /*距顶端举例*/      right:40px; /*距右侧位置*/      color:red; }
Nach dem Login kopieren

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();    });});
Nach dem Login kopieren

 

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage