javascript - 对齐 float Div 底部的按钮 - BootStrap Responsive

Question

我试图在用户向下滚动 600 像素时显示的 div 底部对齐一个按钮。

我无法让按钮对齐我想要的位置，因为当我使用 margin-top 时，当屏幕尺寸改变时，按钮位置改变，因为我使用 % 因为我希望它响应。

这里是按钮代码和div代码。

按钮和div

<div class="topMenu"><button type="button" class="btn btn-sky btn-lg btn-float"><a href="#">Get Started</a></button></div>

.topMenu {
display: none;
position: fixed;
top: 0;
width: 100%;
height: 14%;
border-top: 1px solid #000;
background: #337AB7;
z-index: 1;
}


$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 600) {
  $('.topMenu').fadeIn();
} else {
  $('.topMenu').fadeOut();
}

});

感谢您的帮助。

Answer 1

首先，从 button 元素中取出链接。它不是有效的 HTML。

接下来，您需要将父 div 的位置设为相对，将按钮的位置设为绝对。给你的按钮一个 bottom 和 left 值，你应该是好的。

.topMenu {
position: relative;
width: 100%;
height: 1000px;
border-top: 1px solid #000;
background: #337AB7;
z-index: 1;
}

button {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: none;
}