Bootstrap4: исправление и выцветание в нижнем колонтитуле внизу страницы - PullRequest
Новая
       28

Bootstrap4: исправление и выцветание в нижнем колонтитуле внизу страницы

0 голосов
/ 02 июня 2019

Я пытаюсь сделать так, чтобы мой нижний колонтитул оставался внизу и позволял ему исчезать при прокрутке вниз страницы (если это возможно). Так что это не будет видно, пока вы не прокрутите весь путь до конца.

На самом деле он находится вверху страницы.

Редактировать: я просто пытался использовать код ниже, но он не будет отображаться как «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>

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

А теперь нижний колонтитул находится внизу содержимого, а не внизу страницы ...

1 Ответ

0 голосов
/ 03 июня 2019
  • Нижний колонтитул является последним элементом на странице, поэтому он остается в нижней части.
  • . Мы проверяем, видим ли он, если да, мы добавляем к нему наш класс 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>
...