、これら 2 つの css_html/css_WEB-ITnose を実装する方法
1 つ目は、セカンダリ ナビゲーション バーを実装することです。
セカンダリ ナビゲーション バーの上にプライマリ ナビゲーション バーもあります。
スライド バーが下にスライドすると、プライマリ ナビゲーション バーは徐々に消えますが、セカンダリ ナビゲーション バーはページの上部に固定されたままになります。
スライダーがページの上部に戻ると、第 1 レベルのナビゲーション バーが再び表示されます。
2 番目の方法は、画像に曇りガラスの効果を与えることです。
商品購入時と同様に、マウスを写真上に移動すると背景がぼかされます。すりガラスには「今すぐ購入」ボタンが付いています。
私が何を言っているのか理解できない場合は、このページに同様の実装があります。
http://www.23mofang.com/
最初の実装は次のようです。 jqueryで実装する必要があるのでしょうか?あまり確信はありませんが、少なくともページ上の CSS に関する手がかりは見当たりません。
使用経験のある方、アドバイスを頂ければ幸いです。もちろん、ヘルプドキュメントを提供していただければ大変助かります。
ディスカッションへの返信 (解決策)
すべては CSS と組み合わせた jQuery によって行われます
1. セカンダリ ナビゲーション バー、位置: ブラウザ ウィンドウを基準にして絶対位置が固定されています。スクロール バーの位置が第 1 レベルのナビゲーション バーの高さより大きい場合、第 2 レベルのナビゲーション バーの上部の値が 0 になるようにします。すりガラス効果ではありませんが、白い背景レイヤーの 90 % の透明度
はすべて、CSS と組み合わせた jQuery によって行われます
1. セカンダリ ナビゲーション バー、位置: 固定。ブラウザウィンドウを基準にして絶対的に配置されます。スクロール バーの位置が第 1 レベルのナビゲーション バーの高さより大きい場合、第 2 レベルのナビゲーション バーの上部の値が 0 になるようにします。曇りガラス効果ではなく、白い背景レイヤーの透明度 90 %
はすべて CSS
1 で完成されたセカンダリ ナビゲーション バー、位置: ブラウザ ウィンドウを基準とした絶対的な位置に固定されています。スクロールバーの位置が第1レベルのナビゲーションバーの高さより大きい場合、第2レベルのナビゲーションバーの上部の値が0になるようにします
2. jqueryはCSS3アニメーションを組み合わせ、マウスオーバーとマウスアウトでクラスを切り替えることで実現しています。すりガラス効果ではなく、透明度90%の白背景レイヤーです

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

GiteEpages静的Webサイトの展開が失敗しました:404エラーのトラブルシューティングと解像度Giteeを使用する
