JQuerでページのトップとボトムで要素の表示・非表示をしたい

###前提・実現したいこと
一般的なフローティングのボタンですが、ページのトップとボトムで非表示
なるようにしたいです。

###該当のソースコード

$(function(){ 
    var ssBtn1 = $('.floatBtn1');
      ssBtn1.hide();
    $(window).scroll(function () {
       if ($(this).scrollTop() > 600 && $(this).height() + $(this).scrollTop() ) {
            ssBtn1.fadeIn();
       } else {
            ssBtn1.fadeOut();
       }
    });
});

###結果
結果としては、トップで非表示になりますが、
ボトムで非表示になりません。
ネット上をくまなく探してみたのですが、
意外に情報が少なくできずに困っております。
特に、
「スクロールするとヘッダーやボタンが表示・非表示になる、またはページ下部で
ヘッダーやボタンが表示・非表示になる」
といったどちらか一方の内容になってしまいます。

ご教授いただけませんでしょうか？
何卒よろしくお願い申し上げます。

m.ts10806

2017/08/23 04:06 編集

「ボトムだけで非表示」は現在実現できていますでしょうか？

lingwood

2017/08/23 05:26

mts10806　様　お世話になります。ご質問ありがとうございます。「トップの時に非表示」からスタートしていますので、現在は「ボトムだけ非表示」は試行していなかったです。ただ、ネット情報をいろいろみますとボトム位置に来た時にアクションをする系のものはたくさんありましたので、それを改変してできるので？はと思ったことは思ったのですが・・・そこまで至っておりません。すみません。

m.ts10806

2017/08/23 05:31 編集

ボトム非表示ができれば、　「トップである　または（or）ボトムである」→非表示　「それ以外（else）」→表示　と組むことで実現できそうに思います。回答で指摘がありますが、if文の条件がおかしいかもしれません。複数条件を組み込むときは限定的に起きる操作を優先で作ったほうがバグが起きにくくなります。

lingwood

2017/08/23 06:07

mts10806　様　お世話になります。自己解決策でコメントさせていただきましたが、mts10806様のアドバイス通りにやったらできました。今回ズバリのご回答もいただきましたが、とても勉強になりました。また、勉強させていただきまして誠にありがとうございました。またの際にも宜しくお願い申し上げます。

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

回答3件

まずif文がおかしいような気がするのですが・・・

 if ($(this).scrollTop() > 600 && $(this).height() + $(this).scrollTop() )

スクロール位置が600以上 かつ 高さ＋スクロール位置？？

投稿2017/08/23 04:53

退会済みユーザー

総合スコア0

lingwood

2017/08/23 05:32

h_3478　様お世話になります。ご指摘ありがとうございます。すみません、「&& $(this).height() + $(this).scrollTop()」までの部分は、以下のブログを参考にして付与してみました。 http://blog.higty.xyz/archives/627/ もともとは、トップから600スクロールしたらボタンを表示させるというスクリプトです。すみません、少しでもヒントを頂けましたらと思います。よろしくお願い致します。

x_x

2017/08/23 05:54

そこ、===で切れてて何かおかしいですが、本来こう書いてあるものだと思いますよ。 if ($(document).height() === $(this).height() + $(this).scrollTop()) {

lingwood

2017/08/23 06:11

x_x　様？！？！そういうことですか？！？！枠からはみ出ていたので気がつきませんでした・・・教えてくださいましてありがとうございました。

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

皆さま、たくさんのご回答、誠にありがとうございました。
今回、ズバリのご回答を頂きましたが、
mts10806様やh_3478様からいただきました
・複数条件を組み込むときは限定的に起きる操作を優先で作ったほうがバグが起きにくくなる
・if文がおかしい
というアドバイスをいただきまして、自分なりにコード改変してみましたところ、
いただいたご回答と同じ動きを得ることができました。

$(function(){
var bottomPos = $(document).height() - $(window).height();
var ssBtn1 = $('.floatBtn1');
ssBtn1.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 300 && $(this).scrollTop() <= bottomPos) {
ssBtn1.fadeIn();
} else {
ssBtn1.fadeOut();
}
});
});

アドバイスを下さったり、ご指摘をいただきました皆様に心より御礼申し上げます。
本当にありがとうございました。

今後ともまたよろしくお願い致します。

投稿2017/08/23 06:05

lingwood

総合スコア40

ベストアンサー

質問者さんが想像している動作は以下のような動作でしょうか？
条件を整理してみると、ボタンを表示させたい場面は、以下の2つの条件を満たすときだと考えることができます。

ウィンドウ上部での位置($(window).scrollTop())がtopクラスの位置($(".top").offset().top)よりも大きいとき。
ウィンドウ下部での位置($(window).height() + $(window).scrollTop())がbottomクラスの位置($(".bottom").offset().top)よりも小さいとき(bottomクラスが設定されている要素が見えないとき)。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .top {
13            height: 1000px;
14            background-color: #ddd;
15        }
16
17        .middle {
18            height: 2000px;
19            background-color: #eee;
20        }
21
22        .bottom {
23            background-color: #ccc;
24            height: 300px;
25        }
26
27        .fixed-button {
28            display: none;
29            position: fixed;
30            bottom: 5%;
31            right: 10px;
32        }
33    </style>
34</head>
35<body>
36<div class="container">
37    <div class="top"></div>
38    <div class="middle"></div>
39    <div class="bottom"></div>
40    <div class="fixed-button">botton</div>
41</div>
42<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
43<script>
44    $(window).scroll(function () {
45        var sp = $(window).scrollTop();
46        $(window).height() + sp < $(".bottom").offset().top && sp > $(".top").offset().top ? $(".fixed-button").fadeIn() : $(".fixed-button").fadeOut();
47    });
48</script>
49</body>
50</html>