Search code examples
javascripthtmlcssbootstrap-4footer

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

I am trying to get my footer to stay at the bottom and let it fade in, when scrolled to the bottom of the page (if that's possible). So it wont be visible, until you scroll all the way to the end.

Actually it is staying at the top of the page.

Edit: I just tried to use the code below, but it wont appear as a "slowReveal"...

I included my footer at the bottom of my pages, edited my footer as you wrote and added my css file.

<!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:[email protected]"> Matthias Weihrauch </a>

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

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

And now the footer is only at the bottom of the content and not at the bottom of the page..

And now the footer is just at the bottom of the content and not at the bottom of the page...

Solution
    • The footer is the last item on the page, so it stays at the bottom
    • we check to see if it is in view, if yes, we add our class slowReveal to it
    • slowReveal has an animation that brings the footer from faded to full opacity

    working code below:

    $(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:[email protected]"> Matthias Weihrauch </a>

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