代码之家 › 专栏 › 技术社区 › Sonhja

如何使可滚动的页脚显示在固定内容上?

css html

-1

Sonhja · 技术社区 · 6 年前

我有一个网站,其中我有两个按钮固定在我的页面底部,如下所示:

我还有一个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>

这就是css button1-in-bottom 和 button2-in-bottom 固定在底部:

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

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

但我找不到办法。有谁能帮我找到解决这个问题的办法吗?谢谢!

我的代码片段示例:

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 出现在 底部按钮1 . 你知道我怎样才能做到吗?

2 回复 | 直到 6 年前

Nidhi 6 年前

你可以设定价值 .fixed-bottom-xs div等于 页脚高度 这样它们就不会互相重叠了

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>

Aqil 6 年前

你应该给你的页脚一个固定的位置,并且z-index要比div或按钮高,如下所示:

.fixed-to-bottom {
    position: fixed;
    bottom: 0px;
    z-index: 2;
    left: 0;
}
.button-in-footer
{
position:fixed;
bottom:0;
z-index:3;
}

<body>
   <div class="fixed-to-bottom">
       <input type="button" class="button1-in-bottom fixed-bottom" value="button 1" />
       <input type="button" class="button1-in-bottom fixed-bottom" value="button 2" />
   </div>

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