Question

我正在尝试对齐div底部的按钮，该按钮显示用户向下滚动600px的时间。

我无法将按钮对齐到我想要的位置，因为当我使用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的位置relative和按钮的位置absolute。为您的按钮添加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;
}

在浮动底部对齐按钮 - BootStrap响应

1 个答案: