个人中心
gpt4 book ai didi

html - 如何使可滚动的页脚出现在固定内容上？

转载 作者：行者123 更新时间：2023-11-28 17:04:21 25 4
gpt4 key购买 nike

我有一个网站，我在页面底部固定了两个按钮，如下所示:

enter image description here

我还有另一个 div 在 <footer> 中标签。所以它看起来像这样:

<body>
   ...
   <div class="fixed-to-bottom">
       <input type="button" class="button1-in-bottom fixed-bottom" />
       <input type="button" class="button2-in-bottom fixed-bottom" />
   </div>

   <footer>
        <input type="button" class="button-in-footer" />
   </footer>
</body>

这是制作 button1-in-bottom 的 css和 button2-in-bottom固定在底部:

.fixed-bottom {
    position: fixed;
    bottom: 0px;
   z-index: 2;
   left: 0;
}

当我向下滚动(所以我转到页面底部)时，我希望位于页脚的底部位于其他两个按钮之上，如下所示:

enter image description here

但是我没有找到如何做到这一点的方法。谁能帮我找到解决这个问题的方法？谢谢!

我的代码片段示例:

body {
  background-color: #cdcdcd;
}
.fixed-bottom-xs {
    position: absolute;
    bottom: 0;
    z-index: 2;
    left: 0;
}

.w-100 {
    width: 100%;
}

#select-passengers {
    margin-bottom: -1px!important;
}

.passengers-summary {
    cursor: pointer;
    background-color: white;
    padding: 15px 15px 13px 15px;
    position: relative;
}
.passengers-summary__label {
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
    margin-right: 25px;
}

.passengers-summary__passengers {
    display: inline-block;
    vertical-align: middle;
}

.passengers-summary__passenger {
    display: inline-block;
    color: #4D4D4D;
    font-weight: bold;
    margin-right: 5px;
}
.passengers-summary__passenger--adult:before {
    content: "\e916";
}
.passengers-summary__passenger:before {
    font-size: 22px;
    color: #02A39C;
    margin-right: 3px;
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}
.btn {
    background-color: #FFA745;
    display: inline-block;
    width: auto;
    padding: 16px 12px 15px;
    font-family: "Montserrat", sans-serif, "Verdana";
    font-weight: bold;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    border: none;
}
.btn--no-radius {
    border-radius: 0;
}
.btn--block {
    display: block;
    width: 100%;
}
.footer__container {
    background-color: #F0F0F0;
    padding: 15px 0;
    width: 100%;
    position: fixed;
    bottom: 0;
}

@media only screen and (min-width: 0px)
.container {
    width: 100%;
}

.container {
    margin: 0 auto;
    padding: 0 10px;
}
.footer {
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -moz-justify-content: center;
    justify-content: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative;
}
<body>
<div class="fixed-bottom-xs w-100 mobile-only" >
  <div class="w-100 mobile-only cta-bottom">
    <div class="passengers-summary" data-show="#passengers_layer" id="select-passengers">
		    <div class="passengers-summary__content">
          <span class="passengers-summary__label">Passengers</span>
          <div class="passengers-summary__passengers">
            <div class="passengers-summary__passenger--adult passengers-summary__passenger">x1</div>
          </div>
        </div>
    </div>
  </div>
  <button type="submit" class="btn btn--block btn--no-radius">Continue</button>
</div> 

<footer class="footer__container">
    <div class="container">
     <div class="footer">
  		<div class="footer__links">
         <p class="footer__link" data-modal-open="modal-legal">Aviso legal, política de privacidad y cookies</p>
       </div>
     </div>
</div>
</footer>
</body>

如您所见，footer在底部按钮后面。但是当我向下滚动时，我想要 button-in-footer出现在 button1-in-bottom .关于如何实现这一目标的任何想法？

最佳答案

您可以将 .fixed-bottom-xs div 的 bottom 值设置为等于 height of footer 这样它们就不会相互重叠

body {
  background-color: #cdcdcd;
}
.fixed-bottom-xs {
    position: absolute;
    bottom: 80px; /* set value equal to height of footer*/
    z-index: 2;
    left: 0;
}

.w-100 {
    width: 100%;
}

#select-passengers {
    margin-bottom: -1px!important;
}

.passengers-summary {
    cursor: pointer;
    background-color: white;
    padding: 15px 15px 13px 15px;
    position: relative;
}
.passengers-summary__label {
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
    margin-right: 25px;
}

.passengers-summary__passengers {
    display: inline-block;
    vertical-align: middle;
}

.passengers-summary__passenger {
    display: inline-block;
    color: #4D4D4D;
    font-weight: bold;
    margin-right: 5px;
}
.passengers-summary__passenger--adult:before {
    content: "\e916";
}
.passengers-summary__passenger:before {
    font-size: 22px;
    color: #02A39C;
    margin-right: 3px;
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}
.btn {
    background-color: #FFA745;
    display: inline-block;
    width: auto;
    padding: 16px 12px 15px;
    font-family: "Montserrat", sans-serif, "Verdana";
    font-weight: bold;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    border: none;
}
.btn--no-radius {
    border-radius: 0;
}
.btn--block {
    display: block;
    width: 100%;
}
.footer__container {
    background-color: #F0F0F0;
    padding: 15px 0;
    width: 100%;
    position: fixed;
    bottom: 0;
}

@media only screen and (min-width: 0px)
.container {
    width: 100%;
}

.container {
    margin: 0 auto;
    padding: 0 10px;
}
.footer {
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -moz-justify-content: center;
    justify-content: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative;
}
<body>
<div class="fixed-bottom-xs w-100 mobile-only" >
  <div class="w-100 mobile-only cta-bottom">
    <div class="passengers-summary" data-show="#passengers_layer" id="select-passengers">
		    <div class="passengers-summary__content">
          <span class="passengers-summary__label">Passengers</span>
          <div class="passengers-summary__passengers">
            <div class="passengers-summary__passenger--adult passengers-summary__passenger">x1</div>
          </div>
        </div>
    </div>
  </div>
  <button type="submit" class="btn btn--block btn--no-radius">Continue</button>
</div> 

<footer class="footer__container">
    <div class="container">
     <div class="footer">
  		<div class="footer__links">
         <p class="footer__link" data-modal-open="modal-legal">Aviso legal, política de privacidad y cookies</p>
       </div>
     </div>
</div>
</footer>
</body>

关于html - 如何使可滚动的页脚出现在固定内容上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50622497/

25 4 0
文章推荐： python - 衍生进程中的操作系统环境变量读取
文章推荐： JavaScript:循环遍历字符串，如果字符串第一个字母包含元音，则返回字符串 + 'ay'
文章推荐： python - 如何在用户设置中为 VS Code python Sort Imports 配置行长度？
文章推荐： javascript - 如何在按 Enter 键时清除文本输入框(在 div 中)？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com