ホームページ > ウェブフロントエンド > jsチュートリアル > jsはスクロールバーのスクロールイベントをリッスンして、特定のラベルのコンテンツが常に同じ位置になるようにします_javascriptスキル

jsはスクロールバーのスクロールイベントをリッスンして、特定のラベルのコンテンツが常に同じ位置になるようにします_javascriptスキル

WBOY
リリース: 2016-05-16 17:02:38
オリジナル
1221 人が閲覧しました

ちょっとした知識ポイントですが、これ以上面倒なことはせずに、コードに移動してください

css:

コードをコピー コードは次のとおりです:

<style> <br>#anchor:{ <br>position:absulate; :40%; <br>左:40%; <br>幅:100px; <br>} <br></style</ pre><br&gt ; <BR><BR> <BR>js: <BR></div><BR><BR><div class="codetitle">コードをコピー<span><a style="CURSOR: pointer" data="86119" class="copybut" id="copybut86119" onclick="doCopy('code86119')"><U> コードは次のとおりです。 🎜></U> </a> <pre name="code" class="javascript">var auchorTop = $("#anchor").css("top"); auchorTop = Number(auchorTop. substring(0, anchorTop.indexOf( "p"))); //最初に、リスナーの外側の id=anchor を持つラベルの初期位置を記録します </div>window.onscroll = function () { <div class="codebody" id="code86119">var top = document .documentElement.scrollTop || document.scrollTop; <br>$("#anchor").css("top", anchorTop "px");
🎜>
html:




コードをコピー


コードは次のとおりです。 top=document.documentElement.scrollTop||document.body にスクロール バーのスクロール イベントを追加できます。 listen 関数の .scrollTop; は次のように記述されます。異なるブラウザ間の互換性を避けるために、ここでは chrom ブラウザと ff ブラウザをテストしました。前者は document.body.scrollTop 属性をサポートし、後者は別の属性をサポートします。 '||' これら 2 つの属性を組み合わせるための記号。異なるブラウザと互換性があります。 AnchorTop は、ターゲットの開始点とブラウザの上部の間の距離です。ここで注意する必要があるのは、「#anchor」タグの位置です。absulate です。それ以外の場合、top 属性値は常に 0px です。
スクロール バーがスクロールすると、上部の値が変更され、コンテンツを同じ位置に保つために、「#anchor」の初期の上部の値がスクロール バーの上部の値に追加されます。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート