ホームページ > 記事 > ウェブフロントエンド > div float_html/css_WEB-ITnoseのスタイルについて質問させていただきます。
div float_html/css_WEB-ITnoseのスタイルについて質問させていただきます。
- WBOYオリジナル
- 2016-06-24 12:10:22963ブラウズ
皆さん、こんにちは。このような効果を実現したいのです。つまり、スクロールバーが引き下げられ、div に引き下げられ、この div の下にコンテンツがない場合、引き下げ続けると、この div はスクロールバーと同期して下に移動します。実装方法を教えてください。一部の実装方法では、インターネットの http://www.kl688.com/ という広告が表示されます。右側にはこの効果があります。ご指導をお願いします
ディスカッション (解決策) への返信
ページが本来の位置を超えてスクロールする場合は、固定スタイルを追加してください。ページが固有の位置を超えてスクロールするときのスタイル
HTML コード
< html テスト済み
jquery をダウンロードしていないですよね?
ページが固有の位置を超えてスクロールするときに固定スタイルを追加するだけです
HTML コード
/* IE6 の位置を固定 上部
ハイライト。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>滚动超过时固定位置</title> <script type="text/javascript" src="js/jquery-1.6.4.min.js" ></script> <style type="text/css" > .fixed-top /* position fixed Top */{position:fixed;bottom:auto;top:0; } * html .fixed-top /* IE6 position fixed Top */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));} </style></head><body><div style="height:500px;border:1px solid green;">some text before</div> <div id="fixpass" style="border:1px solid red; background-color:gray;width:100%;">这是一些文字，滚动超过时将固定</div><div style="height:1000px;border:1px solid blue;position:relative;">some text after<div style="position:absolute;bottom:0;">some end text</div></div></body> <script type="text/javascript"> var $window = $(window), $stickyEl = $('#fixpass'); var elTop = $stickyEl.offset().top; $window.scroll(function() { var windowTop = $window.scrollTop(); $stickyEl.toggleClass('fixed-top', windowTop > elTop); }); </script></html> あらゆる種類のブラウザでテストしました
jquery をダウンロードしていませんよね? うわー、jquery を使用していることに気づきませんでした。テストしましたが問題ありませんでした。 Web ページにある他のスタイルが影響を与えるはずですが、この効果は使用すべきではありません。とにかくありがとうございました！
JScript コード
eeedbd2dca9450876438ad57dec446b6
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e