


これをどのように実装するかは誰にもわかりません。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 _html/css_WEB-ITnose
写真に示すように、赤いボックス内の div です。元々はあるべき位置にありましたが、その後、ページをスクロールすると、次のようになります。彼をロールアウトすると、ブラウザの上部で止まりました。これを実現する方法を教えてください。コード例を提供するのが最善です。 。
ディスカッションに返信 (解決策)
2 つのアイデアを提供します:
最初の参考文献 http://guohf.iteye.com/blog/605652
2 つ目: js を使用して実装します。
原則: ウィンドウの位置の位置決め、プレゼンテーション オブジェクトの位置の位置決め。プレゼンテーション オブジェクトがウィンドウの位置にない場合は、プレゼンテーション オブジェクトに絶対位置を与えます。参照
http://javayestome.iteye.com/blog/876021
スクロール バー関連の色の属性:
face-color: スライダーの色
hightlight-color: ハイライトの色
3dlight-color:三次元 ライトカラー
darkshadow-color: 影の色
shadow-color: 影の色
arrow-color: 矢印の色
tack-color: スライドカラー
スクロールバーのプロパティ:
over flow:auto は自動です、yes は Yes を意味し、no は No を意味します
overflow-x: 水平スクロールバー
overflow-y: 垂直スクロールバー
これを見てください、比較的単純ですが、しかし重要なのは、それが使えるかどうかです。
デモを見てください。
コアコード:
(function(){ var pos = 0, qaTitle = $('.gb-qatitle-wrap'); $(window).scroll(function () { pos = $(document).scrollTop(); if (pos > 150) { qaTitle.addClass('nomenu'); if(!window.XMLHttpRequest){ qaTitle.css({position: 'absolute',top: pos + 20}); } } else { qaTitle.removeClass('nomenu'); if(!window.XMLHttpRequest){ qaTitle.css({position: 'static',top: 'auto'}); } } });}());
div は絶対を使用して配置されていますか?
別のフローティングレイヤーとして、js を使用して位置を制御します
position:fixed; bottom:100px;
この div をウィンドウ内の特定の位置に固定するだけです
CSS code?12position:bottom:100px;
ただこの div をウィンドウ内の特定の位置に固定します
そうではありません
これは、スクロール バー イベントがトリガーされたときに js, $(window).scroll(function () {}); で実現できます。 div の位置が画面の上部に達したら、絶対配置または相対配置を使用します。
jsで実現できます、 $(window).scroll(function () {}); スクロールバーイベントがトリガーされたときに、divの位置を決定し、画面の上部に到達したら、絶対配置を使用します。または相対的な位置決めはすぐに完了します。
div の位置が画面の上部にあるかどうかを判断するにはどうすればよいですか?
これを見てください、比較的単純ですが、使えます。
デモを参照してください。
コア コード:
JavaScript コード?12345678910111213141516171819(function(){ var pos = 0, qaTitle = $('.gb-qatitle-wrap'); $(window).scroll(function () { …
少し説明してもらえますか。.gb-qatitle-wrap はその div のクラスであり、nomenu もこの div のクラスですか?
これを見てください。比較的単純ですが、重要なことは次のとおりです。使用可能です
デモをご覧ください
コアコード:
JavaScript code?12345678910111213141516171819(function(){ var pos = 0, qaTitle = $('.gb-qatitle-wrap'); $(window).scroll(function ( ) { …
例を参照 はい、わかりましたが、1 つあります。この 1560 が固定数である場合、この div の高さが決定できない場合はどうすればよいですか
次に、その offsetTop を使用します。 div を使用して上の高さを取得します
次に、その div の offsetTop を使用して上の高さを取得します
offsetTop なぜ使い方が間違っているのでしょうか?未定義のようですか?
offsetTop を使用する方法が非常に少ないので、alert($(".gb-qatitle-wrap")[0].offsetTop); と書く必要があることがわかりました。 、、、、、、。 。 。 。 。 。 。 。 。 。 。
JS イベント
window.onscroll(function(){
// コード...
});
8階 sdyngg_00 さんの回答より引用: js, $(window).scroll(function () {} ); スクロールバーイベントがトリガーされたら、div の位置を決定します。これは、絶対配置または相対配置を使用します。
div の位置が画面の上部にあるかどうかを判断するにはどうすればよいですか?
$("#id").offSet().top == 0
offSet が大文字か小文字かを試してみてください。それ

ホット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

この記事では、html5< time>について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

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

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

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