1

我的事情在这里被描述了无数次，一些寻求帮助的人已经找到了解决方案。不幸的是，我还没有为我的案子找到任何东西。我正在尝试解决 IE 11 及以下版本中的以下著名效果：页面完成加载，视口中的导航位于位置底部，向上滚动页面时，导航位于顶部。就像 Wordpress 中的模板“二十七”。我在 Windows 上工作并使用 Xampp。它适用于 Firefox、Chrome、Edge、Opera。不是 Safari，只要 appels 移动版继续运行，它就不会那么糟糕。此外，当我通过 localhost IP 连接时，我的移动设备的浏览器（例如 Chrome 和 FireFox）的行为也很好。即使是三星浏览器也能做对。只有我笔记本电脑上著名的 IE 不起作用。

我正在使用带有 jQ​​uery v3.5.1 的 Bootstrap v4.3.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, 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, illum definitiones no quo, maluisset concludaturque et eum, 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, illum definitiones no quo, maluisset concludaturque et eum, 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, illum definitiones no quo, maluisset concludaturque et eum, 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>
            </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, 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="(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, 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="(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, illum definitiones no quo, maluisset concludaturque et eum, 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, illum definitiones no quo, 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, illum definitiones no quo, maluissetconcludaturque et eum, 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, illum definitiones no quo, maluisset concludaturque et eum, 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, illum definitiones no quo, maluisset concludaturque 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, illum definitiones no quo, maluisset concludaturque et eum, 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, 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 中的变体可以正常工作。但默认设置不允许在触摸设备上缩放图像。这里的一个解决方案是缩放效果，这实际上是一种优雅的变体，因为它可以让用户在网站上停留更长时间。

4

1 回答 1

0

感谢您的回答，很抱歉我回复晚了。

我已经改变了一点，并且更清楚地评论了所有内容。main-nav 和 breadcrumb-nav 现在包含在父 div 中并粘在一起。现在效果更好了，但我有这样的消息：这个站点似乎正在使用滚动链接定位效果。这可能会与异步平移产生不良交互；有关更多详细信息，请参阅https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects并加入有关相关工具和功能的讨论！

粘性比特会是更好的解决方案吗？

非常欢迎您提出意见。非常感谢。

<!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, 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, illum definitiones no quo, maluisset concludaturque et eum, 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, illum definitiones no quo, maluisset concludaturque et eum, 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, illum definitiones no quo, maluisset concludaturque et eum, 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>
            </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, 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: 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: 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>
            <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, illum definitiones no quo, maluisset concludaturque et eum, 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, illum definitiones no quo, maluisset concludaturque et eum, 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, illum definitiones no quo, maluisset concludaturque et eum, 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>                                                                              <!-- 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, illum definitiones no quo, maluisset concludaturque et eum, 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, illum definitiones no quo, maluisset concludaturque et eum, 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>                                                                                  <!-- 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, illum definitiones no quo, maluisset concludaturque et eum, 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, illum definitiones no quo, maluisset concludaturque et eum, 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>                                                                                  <!-- 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, illum definitiones no quo, maluisset concludaturque et eum, 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, 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; 
}

谢谢

于 2021-03-11T21:45:15.687 回答