滚动固定顶部按钮| CSS &jQuery

Scrolling Fixed Top Button | CSS & jQuery

本文关键字：CSS jQuery 按钮 顶部 滚动      更新时间：2023-09-26

我想在amazon.com上重新创建"Proceed to checkout"按钮。唯一的问题是他们的网站没有响应，我也不能模仿我的Chrome浏览器向我显示一个设备用户代理视图。你需要在你的智能手机上查看按钮，但这是我想要做的。

本质上是创建一个滚动的粘性按钮。当用户最初点击一个页面时，他们会在页面/屏幕底部看到一个"立即购买"按钮。当用户滚动并且按钮出现在页面顶部时(由于滚动)，我希望按钮留在那里，而用户进一步向下滚动页面。这只适用于移动视图(响应)。

下面是我到目前为止所做的工作的概要。

我想我将需要得到滚动位置应用CSS在点上，我想让按钮变得粘。

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

尝试:

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

小提琴

相应调整。确保容器有一个position:relative;，就像你已经做的那样。如果你想为整个页面设置body{position:relative;}在你的CSS。fixed的位置将以此为基础。static是每个元素的默认位置

相关文章：