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

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

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

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

jQuery

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

Q&A

解決済

1回答

255閲覧

jQueryでサイドバーの一部を固定をしたい

saya_0825

総合スコア11

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2018/03/22 09:15

以下のようにしたら固定はできたのですが、ヘッダを固定しているため、その分上の方が隠れてしまいます。
どこを変えたら良いのでしょうか?

javascript

1(function(jquery) { 2 jquery(document).ready(function() { 3 var main = jQuery('#main'); 4 var side = jQuery('#side'); 5 var wrapper = jQuery('#scrollbox'); 6 7if (main.length === 0 || side.length === 0 || wrapper.length === 0) { 8return; 9} 10 11 var w = jquery(window); 12 var wrapperHeight = wrapper.outerHeight(); 13 var wrapperTop = wrapper.offset().top; 14 var sideLeft = side.offset().left; 15 16 var sideMargin = { 17 top: side.css('margin-top') ? side.css('margin-top') : 0, 18 right: side.css('margin-right') ? side.css('margin-right') : 0, 19 bottom: side.css('margin-bottom') ? side.css('margin-bottom') : 0, 20 left: side.css('margin-left') ? side.css('margin-left') : 0 21 }; 22 23 var winLeft; 24 var pos; 25 26 var scrollAdjust = function() { 27 sideHeight = side.outerHeight(); 28 mainHeight = main.outerHeight(); 29 mainAbs = main.offset().top + mainHeight; 30 var winTop = w.scrollTop(); 31 winLeft = w.scrollLeft(); 32 var winHeight = w.height(); 33 var nf = (winTop > wrapperTop) && (mainHeight > sideHeight) ? true : false; 34 pos = !nf ? 'static' : (winTop + wrapperHeight) > mainAbs ? 'absolute' : 'fixed'; 35 if (pos === 'fixed') { 36 side.css({ 37 position: pos, 38 top: '', 39 bottom: winHeight - wrapperHeight, 40 left: sideLeft - winLeft, 41 margin: 0 42 }); 43 44 } else if (pos === 'absolute') { 45 side.css({ 46 position: pos, 47 top: mainAbs - sideHeight, 48 bottom: '', 49 left: sideLeft, 50 margin: 0 51 }); 52 53 } else { 54 side.css({ 55 position: pos, 56 marginTop: sideMargin.top, 57 marginRight: sideMargin.right, 58 marginBottom: sideMargin.bottom, 59 marginLeft: sideMargin.left 60 }); 61 } 62 }; 63 64 var resizeAdjust = function() { 65 side.css({ 66 position:'static', 67 marginTop: sideMargin.top, 68 marginRight: sideMargin.right, 69 marginBottom: sideMargin.bottom, 70 marginLeft: sideMargin.left 71 }); 72 sideLeft = side.offset().left; 73 winLeft = w.scrollLeft(); 74 if (pos === 'fixed') { 75 side.css({ 76 position: pos, 77 left: sideLeft - winLeft, 78 margin: 0 79 }); 80 81 } else if (pos === 'absolute') { 82 side.css({ 83 position: pos, 84 left: sideLeft, 85 margin: 0 86 }); 87 } 88 }; 89 w.on('load', scrollAdjust); 90 w.on('scroll', scrollAdjust); 91 w.on('resize', resizeAdjust); 92 }); 93})(jQuery); 94

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

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

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

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

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

guest

回答1

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問