javascript - Bootstrap 4 粘性底部导航栏 - 主要内容在底部导航栏下滚动
问题描述
我已经尝试过并尝试过完成这项工作，但注意到似乎符合我的预期。
我希望确保“主要”内容（即本例中的图像）不会消失在底部导航栏下方。
如果您在下面的 jsfiddle 中看到图像会被截掉一半。这不是预期的效果。
是否可以将“主要”内容视为单独的可滚动实体？
我的目标是在滚动到底部时将最后一张图片完全显示在页面上。
当前代码在这里。
https://jsfiddle.net/6bcyeswz/4/
和这里
<html>
<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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap" rel="stylesheet">
<link href=" /static/custom.css" rel="stylesheet">
<script src="/static/funcs.js?v=3"></script>
<script src="/static/confetti.js"></script>
</head>
<body style="background-color: #F3F9E3">
<div class="container-fluid mb-1" style="background-color: #628B48">
<nav class="navbar navbar-expand-lg navbar-dark secondary-color">
<a class="navbar-brand" href="#"><strong>TESTINGWEBSITE</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-6"
aria-controls="navbarSupportedContent-6" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-6">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#" onclick='navigate(getCookie("name"))'>Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Top Rated</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" data-toggle="tooltip" data-placement="bottom"
title="Login/Sign up to access">My Stats</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-6" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">Dropdown </a>
<div class="dropdown-menu dropdown-secondary" aria-labelledby="navbarDropdownMenuLink-6">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<div class="inline-block text-Light">
<a href="#" class="text-Light">Login
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-door-open" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M1 15.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5zM11.5 2H11V1h.5A1.5 1.5 0 0 1 13 2.5V15h-1V2.5a.5.5 0 0 0-.5-.5z"/>
<path fill-rule="evenodd"
d="M10.828.122A.5.5 0 0 1 11 .5V15h-1V1.077l-6 .857V15H3V1.5a.5.5 0 0 1 .43-.495l7-1a.5.5 0 0 1 .398.117z"/>
<path d="M8 9c0 .552.224 1 .5 1s.5-.448.5-1-.224-1-.5-1-.5.448-.5 1z"/>
</svg></a>
</div>
</div>
</nav>
</div>
<div class="container pt-2">
<div class="row">
<div class="col-12">
<img class="img-thumbnail" src = "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTyhk-6WDKDsgDtpVY8bZxkVu6dfVkkmuAWYg&usqp=CAU">
<img class="img-thumbnail" src = "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTyhk-6WDKDsgDtpVY8bZxkVu6dfVkkmuAWYg&usqp=CAU">
<img class="img-thumbnail" src = "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTyhk-6WDKDsgDtpVY8bZxkVu6dfVkkmuAWYg&usqp=CAU">
<img class="img-thumbnail" src = "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTyhk-6WDKDsgDtpVY8bZxkVu6dfVkkmuAWYg&usqp=CAU">
</div>
</div>
<!---- nav bar bottom fixed for rating photos ---->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
<form method="post" id="form">
<div class="form-group pt-2">
<div class="form-row">
<input type="hidden" id="image" name="image" value="">
<input type="hidden" id="person" name="person" value="">
<input type="hidden" id="answer" name="answer" value="">
<div class="col">
<button type="button" name="love" class="btn btn-success form-control" onclick='post("love")'>
<div class="p2">
I Love It
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
</svg>
</div>
</button>
</div>
<div class="col">
<button type="button" name="yes" class="btn btn-success form-control" onclick='post("yes")'>
<div class="p2">Yes</div>
</button>
</div>
<div class="col">
<button type="button" name="no" class="btn btn-danger form-control" onclick='post("no")'>
<div class="p2">No</div>
</button>
</div>
<div class="col">
<button type="button" name="hate" class="btn btn-danger form-control" onclick='post("hate")'>
<div class="p2">
Hate It
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-exclamation-circle-fill"
fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
</svg>
</div>
</button>
</div>
</div>
</div>
</form>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
解决方案
您可以创建一个模拟粘底行为的类：
.sticky-bottom {
position: sticky !important;
bottom:0;
}
fixed-bottom然后将导航栏中的替换替换为sticky-bottom：
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-bottom">