皆さん、こんにちは。このような効果を実現したいのです。つまり、スクロールバーが引き下げられ、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>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict. dtd">