いつもご回答を寄せていただきありがとうございます。
レスポンシブ環境下でスクロールしたときにサイドバーの一部を固定したいと考えています。デスクトップ環境のとき追従箇所の幅とサイドバーの幅を揃えた場合、タブレット(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%"をデバイス幅に合わせてどのように分岐させればいいのかお恥ずかしいのですがご教示いただけないでしょうか?
どうぞよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/26 02:39
2017/05/26 02:46
2017/05/27 17:15
2017/05/29 03:51
2017/06/02 09:28