Bootstrap4：修复和淡出页面底部的页脚

Question

我试图让我的页脚留在底部并让它在滚动到页面底部时淡入（如果可能的话）。所以它不会是可见的，直到你一直滚动到最后。

实际上它停留在页面顶部。

编辑：我刚刚尝试使用下面的代码，但它不会显示为“slowReveal”...

我在页面底部包含了我的页脚，在你写的时候编辑了我的页脚并添加了我的 css 文件。

<!doctype html>
<html   lang="en">
    <head>
        <!-- Required meta tags -->
        <meta   charset="utf-8">
        <meta   name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link   rel="stylesheet" 
                href="css/bootstrap.css">
        <link   rel="stylesheet" 
                href="css/tarraps_stylesheet.css">
        <link   rel="stylesheet" 
                href="js/bootstrap.js">
        <link   rel="stylesheet" 
                href="js/jquery-3.4.0.min.js">  
        <!-- Bootstrap for Glyphicons -->       

        <!-- jquery js -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.js"></script>    
        
<script>

$(document).ready(function() {

  function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
  }

  function checkScrolling() {
    if (isScrolledIntoView($('.myFooterClass')) == true) {
      if ($('.myFooterClass').hasClass('slowReveal')) { /**/ } else {
        $('.myFooterClass').addClass('slowReveal');
      }
    } else {
      if ($('.myFooterClass').hasClass('slowReveal')) {
        $('.myFooterClass').removeClass('slowReveal');
      }
    }
  }

  window.onscroll = function() {
    checkScrolling();
  }
  window.onresize = function() {
    checkScrolling();
  }
})

</script>


    <body>
    
                <!-- Grid row -->
            <div class="row">
            
                <!-- Grid column -->
                <div class="col-md-12 mb-4">
            
                    <!--Footer-->
                    <footer class="page-footer grey text-center text-md-left mt-0">

                        <!--Footer Links-->
                        <div class="container-fluid">
                            <div class="row">

                                <!--First column-->
                                <div class="col-md-6">
                                    <h5 class="title mb-3">Footer</h5>
                                    <p>Diese Seite wurde im Rahmen der Programmierwerkstatt erstellt.</p>
                                </div>
                                <!--/.First column-->

                                <!--Second column-->
                                <div class="col-md-6">
                                    <h5 class="title mb-3">Links</h5>
                                    <ul>
                                        <li><a href="https://www.h-da.de/">Zur Hochschule Darmstadt</a></li>
                                    </ul>
                                </div>
                                <!--/.Second column-->
                            </div>
                        </div>
                        <!--/.Footer Links-->

                        <!--Copyright-->
                        <div class="footer-copyright">
                            <div class="container-fluid">
                                © 2019 Copyright: <a href="mailto:matthias.weihrauch@stud.h-da.de"> Matthias Weihrauch </a>

                            </div>
                        </div>
                        <!--/.Copyright-->

                    </footer>
                    <!--/.Footer-->
            
                </div>
                <!-- Grid column -->
            
            </div>
            <!-- Grid row -->
    
    </body>
    </head>

现在页脚就在内容的底部而不是页面的底部...

Answer 1

页脚是页面的最后一项，因此它位于底部
我们检查它是否在视图中，如果是，我们将我们的 class slowReveal 添加到它
slowReveal 有一个动画使页脚从褪色变为完全不透明

下面的工作代码：

$(document).ready(function() {

  function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
  }

  function checkScrolling() {
    if (isScrolledIntoView($('.myFooterClass')) == true) {
      if ($('.myFooterClass').hasClass('slowReveal')) { /**/ } else {
        $('.myFooterClass').addClass('slowReveal');
      }
    } else {
      if ($('.myFooterClass').hasClass('slowReveal')) {
        $('.myFooterClass').removeClass('slowReveal');
      }
    }
  }

  window.onscroll = function() {
    checkScrolling();
  }
  window.onresize = function() {
    checkScrolling();
  }
})

.ContentArea {
  height: 2000px;
}

.ContentAreaContent {
  text-align: center;
  padding: 20% 5%;
  font-size: 4em;
}

footer {
  background: lightblue;
}

.slowReveal {
  animation: slowlyReveal 2s ease-in-out;
}

@keyframes slowlyReveal {
  from {
    opacity: 0.05;
  }
  to {
    opacity: 1;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-12 ContentArea">
      <div class='ContentAreaContent'>
        this is just content area... where other elements of your page will show up

      </div>
    </div>

    <div class="col-12">
      <footer class="page-footer grey text-center text-md-left mt-0 myFooterClass">

        <div class="container-fluid">
          <div class="row">
            <div class="col-md-6">
              <h5 class="title mb-3">Footer</h5>
              <p>Diese Seite wurde im Rahmen der Programmierwerkstatt erstellt.</p>
            </div>
            <div class="col-md-6">
              <h5 class="title mb-3">Links</h5>
              <ul>
                <li><a href="https://www.h-da.de/">Zur Hochschule Darmstadt</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="footer-copyright">
          <div class="container-fluid">
            © 2019 Copyright: <a href="mailto:matthias.weihrauch@stud.h-da.de"> Matthias Weihrauch </a>

          </div>
        </div>
      </footer>
    </div>
  </div>
</div>

Bootstrap4：修复和淡出页面底部的页脚

Bootstrap4: Fixing and fading in footer at the bottom of the page

html

javascript

css

footer

bootstrap-4