滚动固定顶部按钮| CSS＆amp; jQuery的

Question

我想在amazon.com上重新创建“继续结帐”按钮。唯一的问题是他们的网站没有响应，我也无法模仿我的Chrome浏览器向我显示设备用户代理视图。您需要查看智能手机上的按钮，但这是我想要做的。

基本上是创建滚动粘滞按钮。当用户最初点击页面时，他们将在页面/屏幕的底部看到“立即购买”按钮。当用户滚动并且按钮出现在页面顶部时（由于滚动）我想让按钮保持在那里，同时用户向下滚动页面。这仅适用于移动视图（响应）。

这是迄今为止我所做的JSFIDDLE。

我想我需要让滚动位置在我希望按钮变粘的点上应用CSS。

jQuery的.scrollTop()方法似乎是最好的选择。

Answer 1

尝试：

$(window).scroll(function(){
  var bn = $('#bn');
  if($(window).scrollTop() > 300) {
    bn.css({position:'fixed', bottom:'10px'});
  }
  else{
    bn.css('position', 'static');
  }
});

FIDDLE

相应调整。如您所知，确保您的容器有position:relative;。如果您希望CSS中的整个页面集body{position:relative;}。 fixed位置将基于此。 static是每个元素的默认位置。