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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

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

Q&A

解決済

2回答

2180閲覧

サイドバーを追従させて、フッター前で止めたい

UKYO9311

総合スコア31

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2019/06/27 01:35

サイトバーを追従させてフッター直前で止めたいのですが、やり方がよくわかりません。

制作実績のページなのですが、現在の仕様だとまず普通に開くとフルスクリーンでタイトルが書かれています。
そして下にスクロールするとサイドバーがあるのですが、途中まではついてくるのですがある一定進むと上に戻ってしまいます。

これをずっと追従するようにしたのですが、次はサイドバーがフッターに被ってしまい見えづらくなってしまいます。

変更前のサイドバーが上に戻るタイプのjsはこのようになっています。

js

1 2// 3// Works Detail Menu ------------------------------ 4// 5 6// jQuery(document).ready(function($){ 7$(document).ready(function(){ 8 var id_name = $('body').attr("id"); 9 10 if (id_name == 'Works_Detail'){ 11 var $win = $(window), 12 $main = $('main'), 13 $summary = $('#works_detail_summary'), 14 $header = $('#works_detail_header'), 15 navHeight = $summary.outerHeight(), 16 navPos = $summary.offset().top, 17 footerHeight = $('footer').outerHeight(), 18 hdrDetailHeight = $('#works_detail_header').outerHeight(), 19 ftrDetailHeight = $('#works_detail_footer').outerHeight(), 20 ltsWorksHeight = $('#latest_works').outerHeight(), 21 ftrAreaHeight = footerHeight + ftrDetailHeight + ltsWorksHeight, 22 docmentHeight = $(document).height(), 23 fixedClass = 'is-fixed', 24 hideClass = 'is-hide'; 25 26 $win.on('load scroll', function() { 27 var value = $(this).scrollTop(); 28 scrollPos = $win.height() + value; 29 if ( value > navPos ) { 30 31 32 if ( docmentHeight - scrollPos <= ftrAreaHeight ) { 33 $summary.addClass(hideClass); 34 } else { 35 $summary.removeClass(hideClass); 36 } 37 38 39 $summary.addClass(fixedClass); 40 } else { 41 $summary.removeClass(fixedClass); 42 } 43 44 45 if ( value > hdrDetailHeight ) { 46 // changeBlack(); 47 $('body').addClass('is-black'); 48 } else { 49 // changeWhite(); 50 $('body').removeClass('is-black'); 51 } 52 }); 53 } 54}); 55 56

ここから

if ( docmentHeight - scrollPos <= ftrAreaHeight ) {
$summary.addClass(hideClass);
} else {
$summary.removeClass(hideClass);
}

を消したらサイドバーが全てついてくるようになりましたが、フッターに被ってしまいます。

足りない情報などありましたらご指摘ください( ; ; )
大変お手数ですが、回答よろしくお願いいたします。

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

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

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

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

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

m.ts10806

2019/06/27 02:10

html,cssもご提示ください(要は他者がコピペで現象を再現確認できる情報)
guest

回答2

0

すみません自己解決できました!!!
ありがとうございました。。。

投稿2019/06/27 02:47

UKYO9311

総合スコア31

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

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

0

自己解決

すみません自己解決できました!!!
ありがとうございました。。。

投稿2019/06/27 02:39

UKYO9311

総合スコア31

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問