スクロールで要素を表示範囲を設定したい

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="utf-8">
6  <link rel="stylesheet" href="css/style.css">
7  <script src="js/jquery-3.4.1.min.js"></script>
8  <script type="text/javascript" src="js/fixed_offer.js"></script>
9
10  <title>フローティングの表示範囲設定</title>
11
12</head>
13
14<body>
15
16  <div><img src="img/fv.jpg"></div>
17  <div><img src="img/view.jpg"></div>
18  <a id="fixed-offer-start" href="#fixed-offer-start"></a>
19  <div><img src="img/img01.jpg"></div>
20  <div><img src="img/img02.jpg"></div>
21  <div><img src="img/img03.jpg"></div>
22  <div><img src="img/img04.jpg"></div>
23  <div><img src="img/img05.jpg"></div>
24  <div><img src="img/img06.jpg"></div>
25  <div><img src="img/img07.jpg"></div>
26  <div><img src="img/img08.jpg"></div>
27</div><a id="fixed-offer-end" href="#fixed-offer-end"></a>
28<div><img src="img/not_view.jpg"></div>
29
30  <div class="fixed-cta" id="fixed-cta">
31    <a class="fixed-cta_button"><img src="img/float.png"></a>
32  </div>
33</body>
34
35</html>
36

css
1*{
2  margin: 0;
3  padding: 0;
4}
5body{
6  text-align: center;
7  background-color: #EBE5ED;
8  width: 50%;
9  margin: 0 auto;
10}
11img{
12  width: 50%;
13  vertical-align: bottom;
14}
15
16.fixed-cta {
17  bottom: 0;
18  left: 0;
19  opacity: 0;
20  position: fixed;
21  text-align: center;
22  width: 100%;
23  z-index: 100;
24}
25
26
27.fixed-cta_button {
28  animation: beat linear 1s 0s infinite;
29  display: inline-block;
30  padding: 0 ;
31  transform-origin: bottom;
32}
33

js
1
2var __assign = (this && this.__assign) || function () {
3    __assign = Object.assign || function(t) {
4        for (var s, i = 1, n = arguments.length; i < n; i++) {
5            s = arguments[i];
6            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7                t[p] = s[p];
8        }
9        return t;
10    };
11    return __assign.apply(this, arguments);
12};
13var FixedOffer = /** @class */ (function () {
14    function FixedOffer(element, options, labels) {
15        var _this = this;
16        if (element === void 0) { element = ''; }
17        if (labels === void 0) { labels = {
18            ended: 'fixed-offer-is-ended',
19            initialized: 'fixed-offer-is-initialized',
20            invisible: 'fixed-offer-is-invisible',
21            visible: 'fixed-offer-is-visible',
22        }; }
23        this.labels = labels;
24        this.isShown = false;
25        this.isClosedOnPurpose = false;
26        this.options = __assign({
27            elementClass: 'fixed-offer',
28            startSelector: '#fixed-offer-start',
29            endSelector: '#fixed-offer-end',
30            closeButtons: '.fixed-offer-closer',
31            revivalMinutes: 0,
32            startCondition: 'entered',
33            isShownEternally: false,
34            endCondition: 'entered'
35        }, options);
36        this.element = document.querySelector(element) || document.createElement('div');
37        this.element.classList.add(this.options.elementClass);
38        this.start = document.querySelector(this.options.startSelector);
39        this.end = document.querySelector(this.options.endSelector);
40        this.closeButtons = document.querySelectorAll(this.options.closeButtons);
41        if (this.closeButtons.length) {
42            this.closeButtons.forEach(function (item) {
43                item.addEventListener('click', function (e) {
44                    e.preventDefault;
45                    _this.close();
46                    _this.isClosedOnPurpose = true;
47                    if (typeof _this.options.revivalMinutes === 'number' && _this.options.revivalMinutes > 0) {
48                        _this.startRevivalTimer();
49                    }
50                });
51            });
52        }
53        if (IntersectionObserver) {
54            var observer = new IntersectionObserver(function (entries) {
55                _this.toggleOnScroll();
56            }, {
57                threshold: 0
58            });
59            if (this.start)
60                observer.observe(this.start);
61            if (this.end)
62                observer.observe(this.end);
63        }
64        else {
65            var scrollTimer_1;
66            window.addEventListener('scroll', function () {
67                if (scrollTimer_1) {
68                    return;
69                }
70                scrollTimer_1 = setTimeout(function () {
71                    scrollTimer_1 = 0;
72                    _this.toggleOnScroll();
73                }, 500);
74            });
75            window.addEventListener('load', function () {
76                _this.toggleOnScroll();
77            });
78            window.addEventListener('resize', function () {
79                _this.toggleOnScroll();
80            });
81        }
82        this.element.addEventListener('transitionend', function () {
83            _this.element.classList.add(_this.labels.ended);
84        });
85        this.element.classList.add(this.labels.initialized);
86        this.element.classList.add(this.labels.ended);
87        this.toggleOnScroll();
88    }
89    FixedOffer.prototype.show = function () {
90        if (!this.isShown && !this.isClosedOnPurpose) {
91            this.element.classList.remove(this.labels.ended);
92            this.element.classList.remove(this.labels.invisible);
93            this.element.classList.add(this.labels.visible);
94            this.isShown = true;
95        }
96    };
97    FixedOffer.prototype.close = function () {
98        if (this.isShown) {
99            this.element.classList.remove(this.labels.ended);
100            this.element.classList.remove(this.labels.visible);
101            this.element.classList.add(this.labels.invisible);
102            this.isShown = false;
103        }
104    };
105    FixedOffer.prototype.toggleOnScroll = function () {
106        var scroll = this.testScroll();
107        if (scroll.start && !scroll.end) {
108            this.show();
109        }
110        else if (!this.options.isShownEternally || scroll.end) {
111            this.close();
112        }
113    };
114    FixedOffer.prototype.testScroll = function () {
115        return {
116            start: this.start !== null ? this.testScrollState(this.start, this.options.startCondition) : true,
117            end: this.end !== null ? this.testScrollState(this.end, this.options.endCondition) : false
118        };
119    };
120    FixedOffer.prototype.startRevivalTimer = function () {
121        var _this = this;
122        var timer = setTimeout(function () {
123            _this.isClosedOnPurpose = false;
124        }, this.options.revivalMinutes);
125    };
126    FixedOffer.prototype.getY = function (element) {
127        return window.pageYOffset + element.getBoundingClientRect().top;
128    };
129    FixedOffer.prototype.testScrollState = function (element, condition) {
130        switch (condition) {
131            case 'arrived':
132                return window.pageYOffset >= this.getY(element) - window.innerHeight;
133            case 'top':
134                return window.pageYOffset >= this.getY(element);
135            case 'entered':
136                return window.pageYOffset >= (this.getY(element) + element.offsetHeight - window.innerHeight);
137            case 'left':
138                return window.pageYOffset >= this.getY(element) + element.offsetHeight;
139            default:
140                return false;
141        }
142    };
143    return FixedOffer;
144}());
145

position: fixed;で追従させる要素

`<div class="fixed-cta" id="fixed-cta">
<a class="fixed-cta_button"><img src="img/float.png"></a>

</div>`

何をどこで表示開始、非表示にさせるか

`<div class="fixed-cta" id="fixed-cta">
<a class="fixed-cta_button"><img src="img/float.png"></a>

</div>` を `<a id="fixed-offer-start" href="#fixed-offer-start"></a>` で１度表示開始 `</div><a id="fixed-offer-end" href="#fixed-offer-end"></a>` のタグ地点で上記追従要素を非表示

##　エラーメッセージ・具体的な不具合
追従の要素が指定の範囲で表示・非表示されない（指定の範囲は上記の通り）
そもそも追従要素すら表示されない

詳しい方ご教授いただけますと幸いです。

Lhankor_Mhy

2020/07/09 01:29

こんにちは。補足願います。・「表示開始」とは何を表示するのですか？・「フローティングさせる要素」とはどれですか？・「フローティング」とはなんですか？・「動作せず」とは具体的には何が起きていますか？　エラーメッセージなどをご提示ください。（エラーメッセージの確認の仕方がわからないようでしたら、その旨をお知らせください）

bakio

2020/07/10 01:24

Lhankor_Mhy さん不備のご指摘ありがとうございます。質問本文に上記詳細追記いたします。

Lhankor_Mhy

2020/07/10 01:37

補足ありがとうございます。 #fixed-offer-start がスクロールによってスクリーンに表示されたら、.fixed-ctaを表示。 #fixed-offer-end がスクロールによってスクリーンに表示されたら、.fixed-ctaを非表示。という理解で合っていますか？その場合、両方がスクリーンに入っているときには、どのような動作を想定されていますか？

Lhankor_Mhy

2020/07/10 01:39

すみません、もうひとつ。 FixedOffer 関数の呼び出しは、どこで行われていますか？ご提示のコードで見つけられませんでした。

bakio

2020/07/10 02:34

#fixed-offer-start がスクロールによってスクリーンに表示されたら、.fixed-ctaを表示。 #fixed-offer-end がスクロールによってスクリーンに表示されたら、.fixed-ctaを非表示。という理解で合っていますか？その場合、両方がスクリーンに入っているときには、どのような動作を想定されていますか？ >>>>>認識あっております。【目標の動作】 .fixed-cta　が最初は非表示の状態で、#fixed-offer-start 　で表示その間は表示、追従をしていて、 #fixed-offer-end　がスクロールでスクリーンに表示されたら非表示という動作を想定しております。 FixedOffer 関数の呼び出しは、どこで行われていますか？ご提示のコードで見つけられませんでした。 >>>>>>>>上記のjavascriptで動作できるものだと思っていました。もしかすると何か書き加えないといけないということかもしれません。初心者ゆえに色々とご指導いただきありがとうございます。こちらのコード探してみます。

bakio

2020/07/10 02:47

【関数の呼び出し】こちらでしょうか？間違っていたらすみません。 const fixedOffer = new FixedOffer('#fixed-cta') const voiceSwitch = document.getElementById('voice_switch') const voiceContent = document.getElementById('voice_content') if (voiceSwitch && voiceContent) { voiceSwitch.classList.add('is-hidden') voiceContent.classList.add('is-hidden') voiceSwitch.addEventListener('click', function(e){ e.preventDefault() voiceSwitch.classList.toggle('is-hidden') voiceContent.classList.toggle('is-hidden') }) }

Lhankor_Mhy

2020/07/10 03:27

1行目がそれっぽいですね。動作しましたか？

bakio

2020/07/10 07:05

動作せずでした.... たくさんお時間割いていただいて申し訳ございません

行動規範の内容に同意します

回答1件

以下のようにすると、当方の環境では動作しました。

CSSを追加。

css
1  .fixed-offer-is-visible{
2    opacity: 1;
3  }

JavaScriptを追加。（ロードイベントの中か、bodyの末尾で）

js
1const fixedOffer = new FixedOffer('#fixed-cta');

投稿2020/07/10 10:22

Lhankor_Mhy

総合スコア36960

bakio

2020/07/10 12:19

早速実践しましたが何も反応せずでした。もう少し粘ります。お時間いただき大変恐縮です。ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

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

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

スクロールで要素を表示範囲を設定したい

position: fixed;で追従させる要素

何をどこで表示開始、非表示にさせるか

関連した質問