个人中心
gpt4 book ai didi

javascript - 滚动时使 CTA 按钮粘在页面底部

转载 作者：行者123 更新时间：2023-11-28 00:00:26 25 4
gpt4 key购买 nike

我想制作一个 CTA 按钮，在页面滚动到一定程度后粘在页面底部。请看下图:

CTA button interaction

规则如下:

  1. 加载时，它应该位于 CTA 按钮的原始位置。
  2. 滚动页面时，CTA 按钮将随之滚动。
  3. 当 CTA 按钮到达窗口顶部时，该按钮将移动到右下角并保持粘性。

任何关于这种交互的 codepen、jsfiddle 或网站引用资料都将不胜感激。

最佳答案

有多种方法可以做到这一点，比如使用插件或使用简单的 CSS 和 JavaScript(下面的示例)。如果您正在寻找滚动按钮的动画，您可以使用动画代码在 CSS 中进行一些调整，或者我猜一些插件已经在这样做了。 

window.onscroll = function() {myFunction()};

var btn = document.getElementById("floatBtn");
var sticky = btn.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    btn.classList.add("sticky")
  } else {
    btn.classList.remove("sticky");
  }
}
body {
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}



.content {
  padding: 16px;
}

.keka {
   width: 100%;
   text-align: center;
}

#floatBtn {
  background: #004567;
  color: white;
  padding: 10px 30px;
  font-size: 18px;
  display: inline-block;
}

.sticky {
  position: fixed;
  bottom: 0;
  right: 20px;
}

.sticky + .content {
  padding-top: 60px;
}
.content{
	height: 1900px
}
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        </style>
    </head>
    <body>
        <div class="header">
            <h2>Header of the page</h2>
            <p>Some content</p>
        </div>
        <div class="keka">
            <button id="floatBtn">Floating button</button>
        </div>
        <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet ex eu nulla interdum fermentum a at est. Vestibulum vehicula augue et nisl porta, at pretium leo consequat. Suspendisse sit amet semper nisi. In hac habitasse platea dictumst. In vehicula elit ut efficitur mollis. Nam vehicula pulvinar pulvinar. Curabitur neque purus, placerat eget nulla iaculis, tincidunt euismod lectus. Praesent facilisis at sem sit amet sagittis. Cras sagittis mi vel ornare convallis. Morbi tempus tempus lacus, eget lacinia magna porttitor non. Praesent tellus quam, molestie tincidunt libero sit amet, luctus viverra velit. Etiam vestibulum aliquam posuere. Praesent a dapibus sem. Sed cursus mi sit amet nisl maximus, eget varius lectus consectetur. Mauris molestie ac mi non malesuada. Proin faucibus sem vitae ex blandit tempor. Donec ut diam in tellus malesuada lacinia maximus non arcu. Proin blandit nisl at lacus feugiat, et auctor lectus viverra. Donec convallis eleifend ligula sagittis viverra. Vivamus mattis, felis et finibus maximus, diam felis vestibulum odio, eget efficitur tellus magna nec ante. Sed porta elit commodo nisi efficitur, in egestas nibh maximus. Integer nec leo ac ligula semper finibus at rhoncus felis. In pellentesque tincidunt pretium. Ut imperdiet eu nisi quis molestie. Cras lectus turpis, aliquam ut egestas ac, condimentum quis sem. In nec lorem dolor. Fusce non velit nec purus aliquet ultricies porttitor at metus. Donec et libero id nunc viverra dictum vel et sem. Integer tellus ligula, posuere quis dignissim sit amet, suscipit sit amet arcu. Vestibulum nec sodales magna, vitae varius justo. Ut ut felis a odio gravida malesuada eu ut lectus. Suspendisse quis nisl vel sem cursus luctus ac in nibh. Praesent at velit ac dolor convallis condimentum. Maecenas ac sagittis odio. In luctus eros sit amet accumsan maximus. Integer non dictum magna, at viverra urna. Mauris lacinia sodales nibh in scelerisque. Ut viverra ante ut nunc commodo, eu varius ipsum rutrum. Morbi dictum sodales dignissim. In eu finibus arcu. In consectetur eleifend libero. Aliquam purus felis, faucibus et rutrum non, consequat at metus. Cras ultricies metus eget rhoncus pulvinar. Quisque hendrerit at lectus fringilla aliquam. Sed viverra tellus tellus, eget fermentum mi ultrices in. Cras auctor, tortor quis eleifend aliquet, dui orci volutpat erat, quis sagittis nisl nisi at lacus. Suspendisse non condimentum orci. Quisque in elit mi. Praesent malesuada nibh a sapien fermentum vehicula. In in felis nibh. Nunc vitae turpis et est aliquet tempor vulputate volutpat neque. Vestibulum ut sapien sit amet diam sodales convallis sit amet euismod urna. In vehicula fermentum est, non porttitor risus pellentesque quis. Fusce condimentum mauris ut felis fringilla maximus. Nullam pharetra nisi nec enim sodales tincidunt. Morbi imperdiet felis eget lacus sagittis ornare. Donec euismod metus at erat luctus, non ullamcorper nunc ultricies. Sed sit amet vestibulum urna, et faucibus felis. Curabitur non mollis arcu, ut rhoncus leo. Integer sagittis iaculis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        </div>
    </body>
</html>

关于javascript - 滚动时使 CTA 按钮粘在页面底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56017606/

25 4 0
文章推荐： html - 如何仅使 div 行的一部分可滚动(使用清晰度而不是 Bootstrap 样式)
文章推荐： javascript - 选择选项时选择元素上的 jQuery 事件(不是 .change)
文章推荐： html - 为什么这个 z-index 不起作用？
文章推荐： Javascript Promises (Q) 不会等待解决后再进行下一个
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com