コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

xScrollStick スクロールバー_レイアウトとレイヤーとともに浮動する JS 特殊効果

WBOY
リリース： 2016-05-16 17:54:16
オリジナル
1108 人が閲覧しました

これは、スクロール バーに続いて浮動する JS 特殊効果です。つまり、画面に対する要素の位置は変更されずにスクロール バーがスクロールします。

このコードは、インターネット上に多数あります。比較すると次のような利点があります:

1. IE6.0 および FF1.5 と互換性があります
2. 使い方が非常に簡単で、初心者に人気です。
3要素間に競合は発生せず、1 つのページに n 個の特殊効果が存在する可能性があり、複数の要素を使用する場合にコードの冗長性がありません。

1. xHTML
として宣言されたドキュメントでのみ使用してください2. 要素は本文の下に配置するのが最善です
3. スクロール時にちらつきが発生するのは避けられません (すでに比較的わずかですが、完璧を求める人は不快に感じるかもしれません)。 )

使用方法:
ページパッケージ内の JS を引用し、特殊効果が必要な div 上でクラスを xScrollStick に設定します。もちろん、必要な位置を記述することを忘れないでください。要素ごとに修正

例 1:


コードをコピー コードは次のとおりです。
コンテンツ...


例 2:


コードをコピー コードは次のとおりです:
コンテンツ...


デモ:

コード ボックスの実行




関連ラベル：
スクロール・バー 浮く
ソース：php.cn
前の記事：jquery_jqueryに基づく不規則な長方形の配置の実装コード 次の記事：JavaScript (c#)_javascript スキルを使用して Word ドキュメントを開くための実装コード
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
React Three Fiber: スクロール イベントが遅れるのはなぜですか? ReactThreeFiber には、カメラのズーム全体にわたって保持したいスプライトを生成する React コンポーネントがあります。アルゴリズムは機能しているようですが (サイ...
から 2024-04-06 13:39:24
0
1
410
Live Server を使用する Web サイトをファイルから起動すると機能しません いくつかのブラウザを試してみましたが、いずれの場合も Web サイトは LiveServer で正常に動作しました。一方、Firefox/Chrome を使用してサイトを起動すると...
から 2024-04-06 12:46:18
0
1
403
クリックしてスクロールすると div を非表示/表示します 検索アイコンをクリックすると表示され、ユーザーがクリックまたはスクロールすると非表示になる、非表示の検索フォームを作成したいと考えています。
から 2024-04-06 12:20:46
0
1
386
再タイトル: 縦型製品ディスプレイ 私の Web ページでは、現在、プロジェクト製品が行ごとに縦方向にリストされています。縦にスクロールして表示したいのですが。水平に変更するにはどうすればよいですか? divclas...
から 2024-04-05 09:17:50
0
1
3505
スクロール背景画像の不透明度を下げ、最小不透明度を制限します 背景画像を取得して、スクロール時に不透明度を下げ、ランディングページから離れると、vanillajavascriptを使用して不透明度を最小値0.5に下げようとしています。スクロー...
から 2024-04-04 23:50:53
0
1
1329
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート