各スクロールイベントで動作するフローティングバナー

前提・実現したいこと

スクロールに応じて出現と画面外に引っ込む動作をスクロール毎に繰り返すイベントを行いたい。
参考サイト

該当のソースコード

<html>

<style>
.floating {
    display: table;
    height: 300px;
    width: 300px;
    border-radius: 50%;
    background-color: #d10000;
    position: fixed;
    bottom: 5rem;
    right: calc(-300px + -5rem);
    transform: rotate(0);
    transition: 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.floating > div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.floating > div > span {
    color: #f1f1f1;
    font-weight: 600;
}

.floating > div > span:first-child {
    display: block;
    font-size: 3rem;
    margin-bottom: 1rem;
}

.floating > div > span:nth-child(2) {
    padding: 10px 20px;
    border: 4px solid;
    border-radius: 30px;
}
</style>

<body>
<div id="section_wrapper">
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</div>

<script>
$(window).on('load' , function() {

    $('#section-wrapper').append('<div class="floating"><div><span></span><span></span>');
    $('.floating > div > span:first-child').text('03-1234-5678');
    $('.floating > div > span:nth-child(2)').text('お問い合わせはコチラ!');

});

$(window).on('scroll' , function() {

    var hideHeight = $('section:nth-last-of-type(2)').offset().top;

    if ($(this).scrollTop() > 500  && $(this).scrollTop() < hideHeight ) {
        $('.floating').css({
        'right' : '5rem' ,
        'transform' : 'rotate(720deg)' 
        });
    } else {
        $('.floating').css({
        'right' : 'calc(-300px + -5rem)' ,
        'transform' : 'rotate(0)' 
        });
    }

});
</script>

</body>
</html>

試したこと

そこで上記に加えてスクロールイベント中は初期位置に戻り、
スクロールが一定時間止まったら、５００以上hideHight以下にあるかぎりcssの変更をさせようと思い、
こちらのサイトを参考に新しくスクロールストップのイベントをつくり、
スクロールストップをしたら上記動作を実行させ、スクロールイベントが発生時に.floatingがright: 5rem;もしくはtransform: rotate(720deg)であれば初期位置にもどすような下記コードを書き足したのですが、エラーは出ないものの動作はしませんでした。
（一度出現したら初期位置に戻りませんでした；）

$(window).on('scroll' , function() {

var right = $('.floating').css('right');
var transform = $('.floating').css('transforme');

    if ( right == '5rem' || transform == 'rotate(720deg)'  ) {
        $('.floating').css({
        'right' : 'calc(-300px + -5rem)' ,
        'transform' : 'rotate(0)' 
        });
    } else {
    //
    }

});

補足情報（FW/ツールのバージョンなど）

参考サイトのようなスクロールイベントが発生中は初期位置にもどり、スクロールストップしたら指定位置にくるような動きが理想です。

稚拙な記述でお恥ずかしいのですが、何かヒントを教授頂けますと幸いです。
よろしくお願いします。

x_x

2018/10/05 06:18

結局scrollstopは使わなかったのでしょうか？

gl00my

2018/10/05 06:29 編集

ご質問いただき、ありがとうございます。コードの記述は省きましたが、該当のソースコード内scriptを 'scrollstop' , function() に変えて試しておりました。外部ファイル化はせず、<script>直下にまるまる記述して使い、動作的には問題なく動いているようです。

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

回答1件

ベストアンサー

回答します。

動作しなかった原因について詳細に確認していませんが、下記コードで同等の動作であることを確認しました。
表示・非表示周りはクラスで対応した方が良いと考えています。
そのため下記コードもそのように対応しております。

提示していただいているコードを少し修正させていただき、
動作するところまで確認しましたのでご確認ください。

html
1<html>
2<head>
3
4  <!-- jqueryを読み込んでください -->
5
6<style>
7.floating {
8    display: table;
9    height: 300px;
10    width: 300px;
11    border-radius: 50%;
12    background-color: #d10000;
13    position: fixed;
14    bottom: 5rem;
15    right: calc(-300px + -5rem);
16    transform: rotate(0);
17    transition: 1.5s cubic-bezier(0.19, 1, 0.22, 1);
18}
19
20.floating > div {
21    display: table-cell;
22    vertical-align: middle;
23    text-align: center;
24}
25
26.floating > div > span {
27    color: #f1f1f1;
28    font-weight: 600;
29}
30
31.floating > div > span:first-child {
32    display: block;
33    font-size: 3rem;
34    margin-bottom: 1rem;
35}
36
37.floating > div > span:nth-child(2) {
38    padding: 10px 20px;
39    border: 4px solid;
40    border-radius: 30px;
41}
42
43/* メニュー表示のためのクラス */
44.floating-active {
45    right : 5rem;
46    transform : rotate(720deg);
47}
48
49/* メニュー非表示のためのクラス */
50.floating-inactive {
51    right : calc(-300px + -5rem);
52    transform : rotate(0);
53}
54
55</style>
56
57</head>
58
59<body>
60<div id="section_wrapper">
61<section style="height: 50vh;">FIRST</section>
62<section style="height: 50vh;">B</section>
63<section style="height: 80vh;">C</section>
64<section style="height: 80vh;">D</section>
65<section style="height: 80vh;">END</section>
66</div>
67
68<script type="text/javascript">
69// scrollstopはサイトを参考にコピペされたとのことなので、私の方もコピペ対応
70$(function(){
71  var scrollStopEvent = new $.Event("scrollstop");
72  var delay = 200;
73  var timer;
74 
75  function scrollStopEventTrigger(){
76    if (timer) {
77      clearTimeout(timer);
78    }
79    timer = setTimeout(function(){$(window).trigger(scrollStopEvent)}, delay);
80  }
81  $(window).on("scroll", scrollStopEventTrigger);
82  $("body").on("touchmove", scrollStopEventTrigger);
83});
84
85$(window).on('load' , function() {
86
87    $('#section_wrapper').append('<div class="floating"><div><span></span><span></span>');
88    $('.floating > div > span:first-child').text('03-1234-5678');
89    $('.floating > div > span:nth-child(2)').text('お問い合わせはコチラ!');
90    // メニューの表示非表示開閉指示用の関数作成
91    window.FloatingMenu = {
92      menuObj : $('.floating')
93	};
94	FloatingMenu.hide = function() {
95	    this.menuObj.removeClass('floating-active');
96	    this.menuObj.addClass('floating-inactive');
97	}
98	FloatingMenu.show = function() {
99	    this.menuObj.removeClass('floating-inactive');
100	    this.menuObj.addClass('floating-active');
101	}
102	FloatingMenu.isActive = function() {
103		return this.menuObj.hasClass('floating-active');
104	}
105	    
106
107});
108$(window).on('scroll', function() {
109  // スクロール中でメニューが表示状態であれば非表示にする
110  if (FloatingMenu.isActive()) {
111  	FloatingMenu.hide();
112  }
113});
114
115$(window).on('scrollstop' , function() {
116
117    var hideHeight = $('section:nth-last-of-type(2)').offset().top;
118
119    if ($(this).scrollTop() > 500  && $(this).scrollTop() < hideHeight ) {
120    	FloatingMenu.show();
121    } else {
122    	FloatingMenu.hide();
123    }
124
125});
126</script>
127
128</body>
129</html>