ふわっと出て決まった高さで止まるスムーススクロールfooter直前で消したい

ポートフォリオ作成しており、JavaScripでふわっと出て決まった高さで止まるスムーススクロールを
実装したくボタンを作っておりますが、footer位置の高さで止めたい（footerに被らないように）のですが、
現状headerでは、しっかりと上にスクロールするとふわっとボタンが現れますが、
footerはボタンが被ってしまっております。

ちょうどスクロールを下にした時にfooter直前でふわっとボタンを消えるようにしたいです。

分かる方いらっしゃいましたらお力添えいただけませんでしょうか。

よろしくお願いいたします。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <link rel="stylesheet" href="css/works.css" />
8    <title>xxx xxxx xxx</title>
9</head>
10<header>
11    <div class="nav-inner flex">
12      <div class="nav-title flex font-title">
13        <div class="nav-main-title">xxx xxx</div>
14        <div class="nav-sub-title">PORTFOLIO</div>
15      </div>
16      <div class="nav-header-menu">
17        <nav class="nav-sns-menu">
18          <ul class="nav-sns-list">
19            <li class="nav-item"><a href="xxx"><i class="nav-snu-color fab fa-twitter"></a></i></li>
20            <li class="nav-item"><a href="xxx"><i class="nav-snu-color fab fa-instagram"></i></a></li>
21            <li class="nav-item"><a href="xxx"><i class="nav-snu-color fab fa-facebook-square"></i></a></li>          </ul>
22        </nav>
23        <nav class="nav-menu">
24          <ul class="nav-list">
25            <li class="nav-item"><a href="portfolio.html">HOME</a></li>
26            <li class="nav-item"><a href="portfolio.html#about">ABOUT</a></li>
27            <li class="nav-item"><a href="selfpr.html">SELF PR</a></li>
28            <li class="nav-item"><a href="portfolio.html#vision">VISION</a></li>
29            <li class="nav-item"><a href="works.html">WORKS</a></li>
30            <li class="nav-item"><a href="blog.html">BLOG</a></li>
31            <li class="nav-item"><a href="portfolio.html#contact">CONTACT</a></li>
32          </ul>
33        </nav>
34      </div>
35    </div>
36    <div class="burger-btn">
37      <span class="bar bar_top"></span>
38      <span class="bar bar_mid"></span>
39      <span class="bar bar_bottom"></span>
40    </div>
41  </header>
42<body>
43    <div id="content" class="top">
44        <a href="#" id="top-button"><i class="fas fa-chevron-up"></i></a>
45      </div>
46    <h2 class="works-title fade-in-bottom flex font-title animate" id="works">WORKS</h2>
47    <div class="works-inner flex">
48    </div>
49    <footer>
50      <div class="footer-nav flex">
51        <div class="font-title">© 2021 - xxx PORTFOLIO</div>
52      </div>
53    </footer>
54    <script src="https://unpkg.com/scrollreveal"></script>
55    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
56  <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox.min.js" integrity="sha256-CtKylYan+AJuoH8jrMht1+1PMhMqrKnB8K5g012WN5I=" crossorigin="anonymous"></script>
57  <script src="js/works.js"></script>
58</body>
59</html>

css
1@charset "UTF-8";
2/* <====== 全体共通 ======> */
3* {
4  margin: 0;
5  padding: 0;
6  -webkit-box-sizing: border-box;
7          box-sizing: border-box;
8}
9
10html {
11  scroll-behavior: smooth;
12  font-size: 16px;
13}
14
15title {
16  width: 16px;
17  height: 16px;
18  padding-left: 30px;
19  line-height: 30px;
20  background: url(.../img/アイコン.jpg) no-repeat;
21}
22
23p {
24  line-height: 2rem;
25  font-size: 0.875rem;
26}
27
28ul li {
29  list-style: none;
30  padding: 0.5rem;
31}
32
33a {
34  text-decoration: none;
35  color: #fff;
36}
37
38h2 {
39  font-size: 2rem;
40}
41
42.flex {
43  display: -webkit-box;
44  display: -webkit-flex;
45  display: -ms-flexbox;
46  display: flex;
47  -webkit-box-pack: center;
48  -webkit-justify-content: center;
49      -ms-flex-pack: center;
50          justify-content: center;
51  -webkit-box-align: center;
52  -webkit-align-items: center;
53      -ms-flex-align: center;
54          align-items: center;
55}
56
57.font-title {
58  font-family: "Caveat", cursive;
59}
60

js
1/* <====== burger-menu ======> */
2
3$(".burger-btn").on("click", function () {
4  $(".burger-btn").toggleClass("close");
5  $(".nav-header-menu").fadeToggle(500);
6  $("body").toggleClass("noscroll");
7});
8
9$("#nav-menu a[href]").on("click", function (event) {
10  $(".burger-btn").trigger("click");
11});
12
13/* <====== animation ======> */
14
15ScrollReveal().reveal(".animate", {
16  origin: "bottom",
17  distance: "50px",
18  duration: 800,
19  viewFactor: 0.5,
20  reset: true,
21});
22
23/* <====== button ======> */
24
25$(document).ready(function () {
26  $("#top-button").hide();
27  $(window).on("scroll", function () {
28    if ($(this).scrollTop() > 20) {
29      $("#top-button").fadeIn("fast");
30    } else {
31      $("#top-button").fadeOut("fast");
32    }
33    scrollHeight = $(document).height();
34    scrollPosition = $(window).height() + $(window).scrollTop();
35    footHeight = $("footer").innerHeight();
36    if (scrollHeight - scrollPosition <= footHeight) {
37      $("#top-button").css({
38        position: "absolute",
39      });
40    } else {
41      $("#top-button").css({
42        position: "fixed",
43      });
44    }
45  });
46
47  $("##top-button").click(function () {
48    $("body,html").animate(
49      {
50        scrollTop: 0,
51      },
52      800
53    );
54    return false;
55  });
56});
57
58```

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

回答1件

自己解決

js
1footHeight = $("footer").offset().top; 
2  if (scrollPosition > footHeight) { 
3

js部分を上記のように変更しましたら解決しました。

投稿2021/04/14 01:21

TMTN

総合スコア53

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.29%

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

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

質問する

ふわっと出て決まった高さで止まるスムーススクロールfooter直前で消したい

関連した質問