ホームページ > ウェブフロントエンド > jsチュートリアル > JS を使用して、ページのスクロールに応じてウィンドウの固定位置要素を表示/非表示にする

JS を使用して、ページのスクロールに応じてウィンドウの固定位置要素を表示/非表示にする

不言
リリース: 2018-06-25 10:23:07
オリジナル
2185 人が閲覧しました

ページの高さが一定の高さより大きい場合、およびページが下にスクロールされる場合、要素はウィンドウ内の固定位置に表示されます。この記事では、ページのスクロールに応じてウィンドウの固定位置を表示/非表示にする JS の実装を紹介します。特定の高さを超えてページが下にスクロールすると、ページの位置が特定の高さよりも低い場合は要素が表示され、ページが上にスクロールすると要素が非表示になります。

最初にレンダリングをお見せします:

1.html


<p id="selected-case-count"><span class=&#39;form-control&#39;>已选: <span class="casecount">0</span></span></p>
ログイン後にコピー

2.css


p#selected-case-count{
position:fixed; /*固定元素位置*/
top:2px; /*距顶端举例*/
right:40px; /*距右侧位置*/
color:red; 
}
ログイン後にコピー

3.js

りー

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

Vue2 を使用して 3 レベルのリンクを実装する方法


JavaScript で単一リンク リストと循環リンク リストを使用する方法


でのプルダウン更新の問題を解決する方法モバイルブラウザのトップ


以上がJS を使用して、ページのスクロールに応じてウィンドウの固定位置要素を表示/非表示にするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート