ホームページ > ウェブフロントエンド > htmlチュートリアル > div float_html/css_WEB-ITnoseのスタイルについて質問させていただきます。

div float_html/css_WEB-ITnoseのスタイルについて質問させていただきます。

WBOY
リリース: 2016-06-24 12:10:22
オリジナル
986 人が閲覧しました

皆さん、こんにちは。このような効果を実現したいのです。つまり、スクロールバーが引き下げられ、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 コード

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict. dtd">