質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

5078閲覧

jQuery offsetをリサイズ時に随時取得したい

lenlen

総合スコア44

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/11/09 14:59

サイドバーをfixedを使い、追尾させたいです。

jQueryでleft位置をサイドバーに与えてやるのですが、ウィンドウサイズを変更したときに前回取得したoffset.leftがそのまま適応されてしまいます。

ですので、リサイズした時に随時offsetを取得できないかと調べつつコードを書いてみたのですが、うまくいきませんでした。

それが下記のソースです。

js

1$(function(){ 2 3 function fix() { 4 window.onload = function () { 5 6 var Box = $('.sidebar'), 7 offset = Box.offset(); 8 var BoxL = offset.left; 9 var BoxT = offset.top; 10 11 $(window).scroll(function () { 12 if($(window).scrollTop() < offset.top - 20) { 13 fixBox.css({ 14 position: 'absolute', 15 top: 'inherit', 16 left: 'inherit', 17 }); 18 } else { 19 fixBox.css({ 20 position: 'fixed', 21 top: '20px', 22 left: fixBoxL, 23 }); 24 } 25 }); 26 } 27 } 28 29 $(window).on('resize', function() { 30 fix(); 31 }); 32 33 fix(); 34 35});

理想は、ロードした時ではなく、リサイズした瞬間にfixBoxLにoffset.leftの値が入ることです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

fix()内部でwindow.onloadを書き換えていますが、window.onloadは1度しか実行されませんので、実行後に書き換えても何も起きません。

取るべき手段としては、

  • サイズ取得ルーチンをfix()の中に直接書く
  • fix()をjQuery実行の1回と、onresizeで実行させる

のようになります。なお、resizeは頻繁に起きるイベントですので、タイマーなどでメイン処理の実行を減らしたほうがいいかもしれません。

投稿2017/11/09 22:54

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

レビューしました。

  • jQueryの$(fn)自体がwindow.onload = fnの完全上位互換みたいなもの

window.onload = fnは後勝ちで上書きされ、前の関数が動作しなくなる害悪設定です。二度と使う事はないので忘れよう

おすすめは普通に変数宣言してそれに突っ込む方法

  • fixは外に出そう。

内部で宣言されている変数は全てfix外で管理し、fixは値を書き換えるのに集中

  • fixBoxfixBoxLが未定義だね。fix関数の中身だから頭にfix付けてみただけ?
  • $(window).on('resize', fn)の第二引数に無名関数を作って渡してるけど、thisを使わない設計なのでそのままfixを渡してしまったほうが簡潔
  • jQueryオブジェクトは慣習的に変数名の頭に$を付ける人が多い
  • オブジェクトのケツカンマはChromeでは動くけど、IEでは動作しなかったような…まぁ優先度低
  • オフセット値を書き換えたら画面更新しないと駄目でしょ

上記を踏まえてコードをリファクタリングしました。
fixBoxfixBoxLは$BoxとBoxLなんだろうなと解釈したので変数名を変えてます。

JavaScript

1$(function() { 2 var $Box = $('.sidebar'), 3 offset, BoxL, BoxT; 4 var fix = function() { 5 offset = $Box.offset(); 6 BoxL = offset.left; 7 BoxT = offset.top; 8 } 9 var render = function() { 10 if ($(window).scrollTop() < offset.top - 20) { 11 $Box.css({ 12 position: 'absolute', 13 top: 'inherit', 14 left: 'inherit', 15 }); 16 } else { 17 $Box.css({ 18 position: 'fixed', 19 top: '20px', 20 left: BoxL, 21 }); 22 } 23 } 24 var refresh = function() { 25 fix(); 26 render(); 27 } 28 29 refresh(); 30 $(window).on('resize', refresh); 31 $(window).on('scroll', render); 32});

投稿2017/11/10 01:30

編集2017/11/10 01:42
miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問