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

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

ただいまの
回答率

90.76%

  • JavaScript

    15363questions

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

JavaScript サイドバー追従が思うように行きません

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 287
退会済みユーザー

退会済みユーザー

※少々急ぎです。言葉足らずのところがあるかもしれませんが、
都度聞いていただければと思います

お世話になっております。
表題についてです。

添付画像のようなレイアウトのwebサイトを作成しています。
グロナビを左におき、スクロールをすると追従させようと思っています。

イメージ説明

私が実装しようとしているのは、下スクロール時に
グロナビを追従スクロールさせ、グロナビの底辺の高さと、Content3の底辺の高さが
一致した時にグロナビの追従スクロールを止め(position : relative)、上スクロール時に
再度グロナビをposition : fixedさせたいと思っています。

しかし、なぜか下スクロール時に
グロナビの底辺の高さと、Content3の底辺の高さが一致した時にスクロールは止まらず、
上スクロール時にスクロールが止まってしまいます。

午前中から粘っていたものの、どうもうまくいかなくて心が粉砕してしまいそうです。

ソースコードは下記のようになります。

// 左サイドバースクロール
    window.addEventListener( "DOMContentLoaded", function(){

        var gloNavFixed = document.getElementById( "gloNavFixed" );
        var content3 = document.getElementById( "content3" );

        window.addEventListener( "scroll", function(){

            var content3Btm = content3.getBoundingClientRect().bottom + window.pageYOffset;
            var gloNavFixedBtm = gloNavFixed.getBoundingClientRect().bottom + window.pageYOffset;

            if( content3Btm < gloNavFixedBtm ){

                gloNavFixed.className = "gloNav__inner-r";
                gloNavFixed.style.top = window.pageYOffset + "px";

            }

        } );


    } );
.gloNav__inner-f{
    position:fixed;
    top:0;
    height:96vh; 
    border-radius:0 5px 5px 0;
    background-color:#ffffff;
}
.gloNav__inner-r{
    position:relative;
    height:96vh; 
    border-radius:0 5px 5px 0;
    background-color:#ffffff;
}

それでは、どうぞ宜しくお願いいたします。

*** 追記 ***
期待した回答以外のものが来ていましたね(笑)
変な印象を与えてしまう書き方をして大変申し訳ございませんでした。
とはいえ、見返したところ回答する上で必要な情報は揃っているかと思いますので
引き続き宜しくお願い致します。

一応内容的に文章のみではイメージの付きづらいものかと思い、図も作成した次第です。
それでも、不足分があれば文頭に記載しているように
ご質問いただければお答え致します。

どうかお力添えいただければと思います。

*** 追記2 ***
承知しました。
ご指摘のように自分の中では必要な情報は揃え、
期待した回答が得られる文章としては十分であろうと判断していました。

とはいえ結果的に、余計な言葉などが発端でやりとりしている内容がそれ以前のものです。
これ以上はどうすることもできないと思いますので、当質問については自力でなんとかします。

ご指摘いただいた皆様についても
お時間を割いていただき誠にありがとうございました。

*** 追記3 ***

@mts10806
そんなに牙を向けないでください。

もちろん、htmlなどもあります。
ただ、当質問ではhtmlのソースコードはあまり重要ではありません。
(html構造ならイメージしやすいよう図を作成しました。)

htmlに必要なid名があれば、この質問についてはレベルが高い方であればわかると思いますし、
実際JavaScriptのソースコードを見ればわかると思います。
重要でないソースコードを記載する事こそ、余計に問題をややこしくさせると思います。

とりあえず当質問については自分でなんとかします。

ありがとうございました。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/04/17 16:29 編集

    https://teratail.com/help/delete-policy どれにも該当しません。自身で回答を書き、自己解決としてください。削除依頼は自由に出せるとしても、削除妥当かを判断するのは運営であり、運営が従うのは運営が定めたルールです。質問者判断のみで達成できるものではありません。

    キャンセル

  • dit.

    2018/04/17 16:52

    退会しちゃったようなのでもう見てないかもしれませんが、スタートラインを合わせるために最低限のソースを希望しただけですよ。急いでいたのならなおさら、「都度聞く」という手間を減らす必要があったのではないでしょうか。

    キャンセル

  • 退会済みユーザー

    2018/04/17 17:42

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 2

0

例えばposition:sticky;を使ってこんな感じ.

<div id="contents">
    <nav>
        ナビ
    </nav>
    <main>
        <article>記事</article>
        <article>記事</article>
        <article>記事</article>
    </main>
</div>
<footer>
フッター
</footer>
#contents{
    --top-margin: 100px;
    --left-margin: 100px;
}
nav{
    position: sticky;
    float: left;
    top: var(--top-margin);
    left: 0;
    width: var(--left-margin);
    height: calc(100vh - var(--top-margin));
    background-color: pink;
}
main{
    margin-left: var(--left-margin);
}
article{
    height: 500px;
}
footer{
    height: 500px;
}
main,nav,main,article,footer{
    box-shadow: 0px 0px 0px 1px black inset;
}


https://jsfiddle.net/defghi1977/5jxxc788/
https://developer.mozilla.org/ja/docs/Web/CSS/position

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

check解決した方法

-4

とりあえず当質問については自分でなんとかします。
皆さまお手数おかけしました。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15363questions

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