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

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

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

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

Q&A

解決済

1回答

2072閲覧

スクロール時追従するサイドバーの幅について

yomomimi104snow

総合スコア16

JavaScript

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

0グッド

0クリップ

投稿2017/05/25 10:55

いつもご回答を寄せていただきありがとうございます。

レスポンシブ環境下でスクロールしたときにサイドバーの一部を固定したいと考えています。デスクトップ環境のとき追従箇所の幅とサイドバーの幅を揃えた場合、タブレット(iPadとして想定)に環境を変えると当然サイドバーの幅からかなり狭くなってしまいます。

// サイドバースクロール $(function() { var target = $(".fixnav"); var footer = $("footer") var targetHeight = target.outerHeight(true); var targetTop = target.offset().top; $(window).scroll(function() { var scrollTop = $(this).scrollTop(); if (scrollTop > targetTop) { // 動的にコンテンツが追加されてもいいように、常に計算する var footerTop = footer.offset().top; if (scrollTop + targetHeight > footerTop) { customTopPosition = footerTop - (scrollTop + targetHeight) target.css({ position: "fixed", top: customTopPosition + "px" }); } else { target.css({ position: "fixed", top: "10px", width: "14.6%" }); } } else { target.css({ position: "relative", top: "auto", width: "100%" }); } }); });

12行目以降の

target.css({ position: "fixed", top: customTopPosition + "px" }); } else { target.css({ position: "fixed", top: "10px", width: "14.6%" });

にあるwidth:"14.6%"をデバイス幅に合わせてどのように分岐させればいいのかお恥ずかしいのですがご教示いただけないでしょうか?
どうぞよろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

window.innerWidthの値次第で分岐させてはどうでしょうか?

イメージこんなかんじです

target.css({ position: "fixed", top: customTopPosition + "px" }); } else { target.css({ position: "fixed", top: "10px", width: getSidebarWidthStyle() });
function getSidebarWidthStyle(){ var windowWidth = window.innerWidth; if(windowWidth < 768){ // Small devices return "80px" }else if(windowWidth < 992){ // Medium devices return "25.0%" }else){ // More Larger return "14.6%" } }

フルだとこんなかんじかな

// サイドバースクロール $(function() { var target = $(".fixnav"); var footer = $("footer") var targetHeight = target.outerHeight(true); var targetTop = target.offset().top; $(window).scroll(function() { var scrollTop = $(this).scrollTop(); if (scrollTop > targetTop) { // 動的にコンテンツが追加されてもいいように、常に計算する var footerTop = footer.offset().top; if (scrollTop + targetHeight > footerTop) { customTopPosition = footerTop - (scrollTop + targetHeight) target.css({ position: "fixed", top: customTopPosition + "px" }); } else { target.css({ position: "fixed", top: "10px", width: getSidebarWidthStyle() // ここを変更 }); } } else { target.css({ position: "relative", top: "auto", width: "100%" }); } }); // ここから追加 function getSidebarWidthStyle(){ var windowWidth = window.innerWidth; if(windowWidth < 768){ // Small devices return "80px" }else if(windowWidth < 992){ // Medium devices return "25.0%" }else){ // More Larger return "14.6%" } } });

投稿2017/05/25 11:09

編集2017/05/29 03:50
h_daido

総合スコア824

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

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

yomomimi104snow

2017/05/26 02:39

ご回答ありがとうございます。先程追加で質問させていただいたのですがウェブに反映がなされていないようなので再度投稿させてください。 ダブっていたらごめんなさい。ご回答いただいた上下のコードに関しては私が質問していたコードの箇所 if (scrollTop + targetHeight > footerTop) { customTopPosition = footerTop - (scrollTop + targetHeight) target.css({) のtarget.css以降に上書きする形になるのでしょうか?Javascripを学び始めたばかりのため大変お恥ずかしいのですが、よろしければ再度ご教示くださいませ
h_daido

2017/05/26 02:46

回答を修正しておきましたよ♪そちらをご参照ください。 htmlがないので、動作確認してないですが、たぶん大丈夫だと思います。動かなかったらコメントください。 functionの場所やスコープなどは勉強しがいがあるので、すこしづつに学んでいくといいと思います。JavaScriptのそれはちょっと難しいですが、学びがいありますよ。
yomomimi104snow

2017/05/27 17:15

勉強のアドバイスもいただきまして大変ありがとうございます。少しづつでもできるだけ自分の能力でできることを増やしたいと思います。回答の修正フルバージョンも再掲していただきありがとうございます。間違えていたらごめんなさい。 position: "fixed"のときに幅をデバイスごとに変更していると思っていたのですが、そのときにご教示頂いたfunction getSidebarWidthStyle(){ var windowWidth = window.innerWidth; をどのように使うのかお恥ずかしいのですがアドバイス頂戴できれば大変ありがたいです。どうぞよろしくお願いします。
h_daido

2017/05/29 03:51

すいません、適用箇所を間違えていました...。回答を修正しました。
yomomimi104snow

2017/06/02 09:28

ご回答に対するご連絡が遅れて大変失礼いたしました。ご丁寧にご回答寄せていただきありがとうございます。今後自分でも解決に望めるように頑張りたいと思います。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問