如何解决Bootstrap 4 导航栏 - 视口的第一个底部和在顶部滚动粘性后 - 在 IE 11 中不起作用
我的问题已经在这里描述过无数次了，一些寻求帮助的人已经找到了解决方案。不幸的是，我还没有找到任何适合我的案例。我正在尝试解决 IE 11 及更低版本中的以下著名效果：页面加载完成，视口中的导航位于位置底部，向上滚动页面时，导航粘在顶部。就像 wordpress 中的模板“twentyseventeen”。我在 Windows 上工作并使用 Xampp。它适用于 Firefox、Chrome、Edge、Opera。不是 Safari，只要 appels 移动版本继续运行，这还不错。此外，当我通过本地主机 IP 连接时，我的移动设备的浏览器（例如 Chrome 和 FireFox）具有良好的行为。即使是三星浏览器也能正常运行。只有我笔记本电脑上著名的 IE 不起作用。
我正在使用 Bootstrap v4.3.1 和 jQuery v3.5.1：请问有人有解决方案吗？
感谢您对我的问题采取行动。
<!DOCTYPE html>
<html lang="es">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div class="header">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" data-interval="12000">
<picture>
<source srcset="./images/body.jpg" media="(min-width: 1600px)">
<source srcset="./images/bg400x240.svg" media="(max-width: 400px)">
<img src="./images/bg2000x1200.svg" class="d-block w-100" alt="...">
</picture>
<div class="carousel-caption d-none d-md-block">
<h5>sample heading</h5>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,illum deFinitiones no quo,maluisset concludaturque et eum,altera fabulas ut quo.</p>
</div>
</div>
<div class="carousel-item" data-interval="12000">
<picture>
<source srcset="./images/body.jpg" media="(min-width: 1600px)">
<source srcset="./images/bg400x240.svg" media="(max-width: 400px)">
<img src="./images/bg2000x1200.svg" class="d-block w-100" alt="...">
</picture>
<div class="carousel-caption d-none d-md-block">
<h5>sample heading</h5>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,altera fabulas ut quo.</p>
</div>
</div>
</div>
<!--<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">PrevIoUs</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>--> <!-- If behavIoUr does not change,it can be removed.-->
</div>
</div>
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark bg-dark"> <!-- Begin Main-Navigation -->
<div class="container">
<a class="navbar-brand" href="#">logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Inicio <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="./firstpage.html">Prólogo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./secondpage.html">Manejo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./thirdpage.html">Equidad de Género</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./fourthpage.html">TGyC</a>
</li>
</ul>
</div>
</div>
</nav>
<hr />
<div aria-label="breadcrumb">
<ol class="breadcrumb">
<div class="container">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</div>
</ol>
</div>
<div class="banner">
<div class="inside-banner">
<div class="container">
<div class="row py-2">
<div class="col-md-3 d-flex align-items-center py-3">
<img src="images/backgroundImage.png" width="200" alt="logo">
</div>
<div class="col-md-6 d-flex align-items-center py-3">
Some text to enable scrolling.. Lorem ipsum dolor sit amet,altera fabulas ut quo. Atqui cauSAE gloriatur ius te,id agam omnis
evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
</div>
<div class="col-md-3 d-flex align-items-center py-3">
Some text to enable scrolling.. Lorem ipsum dolor sit amet,id agam omnis
evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
</div>
</div>
</div>
</div>
</div>
<div class="header">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" data-interval="12000">
<picture>
<source srcset="./images/body.jpg" media="(max-width: 1600px)">
<source srcset="./images/bg400x240.svg" media="(max-width: 400px)">
<img src="./images/bg2000x1200.svg" class="d-block w-100" alt="...">
</picture>
<div class="carousel-caption d-none d-md-block">
<h5>sample heading</h5>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,altera fabulas ut quo.</p>
</div>
</div>
<div class="carousel-item" data-interval="12000">
<picture>
<source srcset="./images/body.jpg" media="(max-width: 1600px)">
<source srcset="./images/bg400x240.svg" media="(max-width: 400px)">
<img src="./images/bg2000x1200.svg" class="d-block w-100" alt="...">
</picture>
<div class="carousel-caption d-none d-md-block">
<h5>sample heading</h5>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,altera fabulas ut quo.</p>
</div>
</div>
</div>
<!--<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">PrevIoUs</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>--> <!-- If behavIoUr does not change,it can be removed.-->
</div>
</div>
<div class="container py-3 my-3">
<h1>sample heading</h1>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,maluissetconcludaturque et eum,altera fabulas ut quo.</p>
</div>
<div class="banner2 my-3">
<div class="container h-100">
<div class="d-flex h-100 align-items-center">
<div>
<h1>Banner heading 2</h1>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,altera fabulas ut quo.</p>
</div>
</div>
</div>
</div>
<div class="container my-3">
<h1>auto height content here</h1>
</div>
<div class="banner3 my-5">
<div class="container">
<div class="px-2 py-3">
A div 944 x 322 px for: a div 800 px and 3 iframes
</div>
<div class="row">
<div class="col-md-4">
<iframe width="100%" height="200px" src=""></iframe>
</div>
<div class="col-md-4">
<iframe width="100%" height="200px" src=""></iframe>
</div>
<div class="col-md-4">
<iframe width="100%" height="200px" src=""></iframe>
</div>
</div>
</div>
</div>
<div class="bg3">
<!-- noch leer -->
</div>
<div class="container py-3 my-3">
<h1>sample heading</h1>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,altera fabulas ut quo.</p>
</div>
<div class="banner3 my-5">
<div class="container">
<div class="px-2 py-3">
A div 944 x 322 px for: a div 800 px and 3 iframes
</div>
<div class="row">
<div class="col-md-4">
<iframe width="100%" height="200px" src=""></iframe>
</div>
<div class="col-md-4">
<iframe width="100%" height="200px" src=""></iframe>
</div>
<div class="col-md-4">
<iframe width="100%" height="200px" src=""></iframe>
</div>
</div>
</div>
</div>
<div class="bg4">
<!-- noch leer -->
</div>
<div class="container py-3 my-3">
<h1>sample heading</h1>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,altera fabulas ut quo.</p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="d-flex justify-content-center align-items-center">
<div>
<img width="250" src="images/10574244_687471241327450_1790403545201929663_n-758x491.jpg" />
<h6 class="mt-2"> The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="d-flex justify-content-center align-items-center">
<div>
<img width="250" src="images/10574244_687471241327450_1790403545201929663_n-758x491.jpg" />
<h6 class="mt-2"> The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="d-flex justify-content-center align-items-center">
<div>
<img width="250" src="images/10574244_687471241327450_1790403545201929663_n-758x491.jpg" />
<h6 class="mt-2"> The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="d-flex justify-content-center align-items-center">
<div>
<img width="250" src="images/10574244_687471241327450_1790403545201929663_n-758x491.jpg" />
<h6 class="mt-2"> The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters</h6>
</div>
</div>
</div>
</div>
<div class="my-4">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
</div>
<script src="jquery.js"></script>
<script src="bootstrap-4.3.1-dist/js/bootstrap.js"></script>
<script>
window.onscroll = function () { myFunction() };
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
</body>
</html>
body {
margin: 0;
padding: 0;
font-size: 28px;
font-family: Arial,Helvetica,sans-serif;
}
.carousel .item {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
height:100vh;
}
#carouselExampleIndicators .carousel-indicators {
bottom: 280px;
z-index: 1;
}
.carousel-item .carousel-caption {
bottom: 200px;
z-index: 1;
}
/*@-webkit-keyframes zoom {
from {
-webkit-transform: scale(1,1);
}
to {
-webkit-transform: scale(1.5,1.5);
}
}
@keyframes zoom {
from {
transform: scale(1,1);
}
to {
transform: scale(1.5,1.5);
}
}*/
.carousel-inner img {
-webkit-animation: zoom 20s;
animation: zoom 20s;
}
#navbar{
position: sticky;
z-index: 2;
bottom: 0;
}
hr {
border-top: 2px solid #ff0000 !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
}
.banner{
background: url('./images/placeholder2000x1200.svg');
background-position: center;
background-size: cover;
width: 100%;
font-weight: 700;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
.banner2{
height: 350px;
}
.h-100{
height: 100%;
}
.bg3{
background: url('./images/1024x698backgroundImage.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
height:100vh;
}
.bg4{
background: url('./images/820x558backgroundImage.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
height:100vh;
}
.breadcrumb-outer{
background: #e9ecef !important;
}
.select{
width: 20% !important;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
Box-shadow: 0px 8px 16px
0px rgba(0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
顺便说一句，如果有人对此信息感兴趣：如您所知，Bootstrap 轮播已经响应，但还不够。对于不同视口的图像交换，我尝试了一些方法，其中最终只有我的 html 中的变体才能正常工作。但是默认设置不允许在触摸设备上缩放图像。这里的一个解决方案是缩放效果，它实际上是一种优雅的变体，因为它能让用户在网站上停留的时间更长。
解决方法
感谢您的回答，很抱歉我回复晚了。
我已经改变了一点，并且更清楚地评论了所有内容。主导航和面包屑导航现在包含在父 div 中并粘在一起。现在效果更好了，但我收到一条消息：该站点似乎使用了滚动链接定位效果。这可能会与异步平移产生不良交互；请参阅https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects了解更多详情并参与相关工具和功能的讨论！
stickybits 会是更好的解决方案吗？
非常欢迎您的意见。非常感谢。
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="first-carousel" class="container-fluid p-0"> <!-- Begin 1st Carousel -->
<div id="carousel-1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role=""> <!--still have to look for the right attribute https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role -->
<div class="carousel-item active" data-interval="12000">
<picture>
<source srcset="./images/placeholder2.jpg" media="(max-width: 1599px)"> <!-- Size-Test -->
<source srcset="./images/placeholder.jpg" media="(min-width: 400px)"> <!-- Size-Test -->
<img src="./images/placeholder.svg" class="d-block w-100" alt="...">
</picture>
<div class="carousel-caption d-none d-md-block">
<h5>sample heading</h5>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,illum definitiones no quo,maluisset concludaturque et eum,altera fabulas ut quo.</p>
</div>
</div>
<div class="carousel-item" data-interval="12000">
<picture>
<source srcset="./images/placeholder2.jpg" media="(max-width: 1600px)"> <!-- Size-Test -->
<source srcset="./images/placeholder.jpg" media="(min-width: 400px)"> <!-- Size-Test -->
<img src="./images/placeholder.svg" class="d-block w-100" alt="...">
</picture>
<div class="carousel-caption d-none d-md-block">
<h5>sample heading</h5>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,altera fabulas ut quo.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div> <!-- End 1st Carousel-->
**<div id="navbar-wrapper">** <!-- Begin Main-Nav -->
<nav id="navbar" class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Logo</a>
<h5 class="text-white mb-0">bla bla bla</h5>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="./index.html">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./firstpage.html">Prólogo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./secondpage.html">Manejo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./thirdpage.html">Equidad de Género</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./fourthpage.html">TGyC</a>
</li>
</ul>
</div>
</div>
</nav> <!-- End Main-Nav -->
<div aria-label="breadcrumb"> <!-- Begin Breadcrumb-Nav -->
<ol class="breadcrumb mb-1">
<div class="container">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</div>
</ol>
</div>
**</div>** <!-- End Breadcrumb-Nav -->
<div class="banner-ticket"> <!-- Begin 1st Banner with Ticket -->
<div class="inside-banner">
<div class="container">
<div class="row py-2">
<div class="col-md-3 d-flex align-items-center py-3">
<img src="images/backgroundImage.png" width="200" alt="logo">
</div>
<div class="col-md-6 d-flex align-items-center py-3">
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,altera fabulas ut quo.
Atqui causae gloriatur ius te,id agam omnis evertitur eum.Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
<div class="col-md-3 d-flex align-items-center py-3">
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,id agam omnis evertitur eum.Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</div>
</div>
</div>
</div> <!-- End 1st Banner ------- Ticket -->
<div id="second-carousel" class="container-fluid p-0"> <!-- Begin 2nd Carousel -->
<div id="carousel-2" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-2" data-slide-to="1"></li>
<li data-target="#carousel-2" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role=""> <!-- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role -->
<div class="carousel-item active" data-interval="12000">
<picture>
<source srcset="./images/placeholder2.jpg" media="(max-width: 1599px)"> <!-- Size-Test -->
<source srcset="./images/placeholder.jpg" media="(min-width: 400px)"> <!-- Size-Test -->
<img src="./images/placeholder.svg" class="d-block w-100" alt="...">
</picture>
<div class="carousel-caption d-none d-md-block">
<h5>sample heading</h5>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,altera fabulas ut quo.</p>
</div>
</div>
<div class="carousel-item" data-interval="12000">
<picture>
<source srcset="./images/placeholder2.jpg" media="(max-width: 1599px)"> <!-- Size-Test -->
<source srcset="./images/placeholder.jpg" media="(min-width: 400px)"> <!-- Size-Test -->
<img src="./images/placeholder.svg" class="d-block w-100" alt="...">
</picture>
<div class="carousel-caption d-none d-md-block">
<h5>sample heading</h5>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,altera fabulas ut quo.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div> <!-- End 2nd Carousel-->
<div class="bannerAfter2ndCarousel my-3"> <!-- Begin 2nd Banner -->
<div class="container h-100">
<div class="d-flex h-100 align-items-center">
<div>
<h1>Banner heading 2</h1>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,altera fabulas ut quo.</p>
</div>
</div>
</div>
</div> <!-- End 2nd Banner -->
<main>
<div id="mainContent1" class="container my-3"> <!-- Begin 1st Topic-Content -->
<h1>auto height content here</h1>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,altera fabulas ut quo.
Atqui causae gloriatur ius te,id agam omnis evertitur eum.Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,id agam omnis evertitur eum.Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div> <!-- End 1st Topic-Content -->
<div class="banner-videos my-5"> <!-- Begin 3rd Banner ----- Videos -->
<div class="container">
<div class="px-2 py-3">
A div 944 x 322 px for: a div 800 px and 3 iframes
</div>
<div class="row">
<div class="col-md-4">
<iframe width="100%" height="200px" src=""></iframe>
</div>
<div class="col-md-4">
<iframe width="100%" height="200px" src=""></iframe>
</div>
<div class="col-md-4">
<iframe width="100%" height="200px" src=""></iframe>
</div>
</div>
</div>
</div> <!-- End 3rd Banner Videos -->
<div id="mainContent2" class="container my-3"> <!-- Begin 2nd Topic-Content -->
<h1>auto height content here</h1>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,id agam omnis evertitur eum.Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div> <!-- End 2nd Topic-Content -->
<div class="banner-videos my-5"> <!-- Begin 4th Banner ---- Videos -->
<div class="container">
<div class="px-2 py-3">
A div 944 x 322 px for: a div 800 px and 3 iframes
</div>
<div class="row">
<div class="col-md-4">
<iframe width="100%" height="200px" src=""></iframe>
</div>
<div class="col-md-4">
<iframe width="100%" height="200px" src=""></iframe>
</div>
<div class="col-md-4">
<iframe width="100%" height="200px" src=""></iframe>
</div>
</div>
</div>
</div> <!-- End 4th Banner Videos -->
<div id="mainContent3" class="container my-3"> <!-- Begin 3rd Topic-Content -->
<h1>auto height content here</h1>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,id agam omnis evertitur eum.Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div> <!-- End 3rd Topic Content-->
<div class="bannerContent my-3"> <!-- Begin 5th Banner -->
<div class="container h-100">
<div class="d-flex h-100 align-items-center">
<div>
<h1>Banner heading 2</h1>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet,altera fabulas ut quo.</p>
</div>
</div>
</div>
</div> <!-- End 5th Banner -->
</main>
<div class="footer"> <!-- Begin Footer -->
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="d-flex justify-content-center align-items-center">
<div>
<img width="250" src="images/placeholder.jpg" />
<h6 class="mt-2"> The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="d-flex justify-content-center align-items-center">
<div>
<img width="250" src="images/placeholder.jpg" />
<h6 class="mt-2"> The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="d-flex justify-content-center align-items-center">
<div>
<img width="250" src="images/placeholder.jpg" />
<h6 class="mt-2"> The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="d-flex justify-content-center align-items-center">
<div>
<img width="250" src="images/placeholder.jpg" />
<h6 class="mt-2"> The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters</h6>
</div>
</div>
</div>
</div>
<div class="my-4">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
</div> <!-- End Footer -->
<script src="jquery.js"></script>
<script src="bootstrap-4.3.1-dist/js/bootstrap.js"></script>
<script src="./fixed-navbar.js"></script>
</body>
</html>
/* fixed-navbar.js*/
const nav = document.querySelector('#navbar-wrapper');
const offset = nav.getBoundingClientRect();
window.addEventListener('scroll',function () {
if (window.pageYOffset > offset.top) {
nav.style.position = 'fixed';
nav.style.top = 0;
} else {
nav.style.position = 'relative';
nav.style.top = '';
}
});
/* CSS */
/*---------------------------------------------------------------------------- Carousel ---------------------------------------------------------------*/
/*.image {
width: 100%;
height: 100vh;
}*/
/*#carousel-1 #carousel-2 .carousel-indicators { /* depence on the viewport of device */
/*bottom: 280px;
z-index: 1;
}*/
/*.carousel-item .carousel-caption { /* depence on the viewport of device */
/*bottom: 200px;
z-index: 1;
}*/
.carousel-inner img {
-webkit-animation: zoom 20s;
animation: zoom 20s;
}
@-webkit-keyframes zoom {
from {
-webkit-transform: scale(1,1);
}
to {
-webkit-transform: scale(1.5,1.5);
}
}
@keyframes zoom {
from {
transform: scale(1,1);
}
to {
transform: scale(1.5,1.5);
}
}
/*-------------------------------------------------------------------------- Main Navbar --------------------------------------------------------------*/
#navbar-wrapper {
z-index: 111;
width: 100%;
}
/*------------------------------------------------------------------------- Breadcrumb-Nav ------------------------------------------------------------*/
.breadcrumb-outer {
background: #e9ecef !important;
}
/*------------------------------------------------------------------------- Banners -------------------------------------------------------------------*/
.bannerAfter2ndCarousel {
height: 350px;
background-color: #e5ff80 !important;
}
.bannerContent {
height: 350px;
background-color: #e5ff80 !important;
}
/*------------------------------------------------------------------------- Videos ---------------------------------------------------------------------*/
.banner-videos {
background-color: #edceba;
}
/*------------------------------------------------------------------------ Select Menu manejo.html------------------------------------------------------*/
/*.bg-upper{
height: 100%;
align-items: flex-end;
}*/
.select {
width: 20% !important;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
谢谢
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
