Question

我想制作一个CTA按钮，该按钮在页面滚动达到一定程度后仍会停留在页面底部。请看下面的图片：

CTA button interaction

规则如下：

在加载时，它应该位于CTA按钮的原始位置。
滚动页面时，将显示CTA按钮。
当“号召性用语”按钮到达窗口顶部时，该按钮将移至右下角并保持在该位置。

任何有关这种交互的codepen，jsfiddle或网站参考都将受到赞赏。

Answer 1

有多种方法可以做到这一点，例如使用插件或使用简单的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>

滚动时，使CTA按钮停留在页面底部

1 个答案: