我试图让我的页脚留在底部并让它在滚动到页面底部时淡入(如果可能的话)。所以它不会是可见的，直到你一直滚动到最后。
实际上它停留在页面的顶部。
编辑:我只是尝试使用下面的代码，但它不会显示为“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>
现在页脚就在内容的底部而不是页面的底部...
最佳答案
- 页脚是页面的最后一项，因此它位于底部
- 我们检查它是否在 View 中，如果是，我们将我们的类
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>关于javascript - Bootstrap 4 : Fixing and fading in footer at the bottom of the page，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56416765/