移动端滚动上下时如何显示/隐藏Bootstrap 3移动端CTA按钮栏？

我想要创建一个仅在移动端显示的HTML元素，里面包含两个CTA按钮：「致电我们」和「获取报价」。目前按钮栏已经能正常显示，但页面顶部已经有电话号码了，所以希望用户向下滚动页面后再显示这个CTA按钮栏。我不太熟悉jQuery，自己搞不定，也不知道该搜什么术语找解决方案。

现有HTML代码 #

<div class="footer navbar-fixed-bottom text-center hidden-lg hidden-md footer-nav" style="background-color:#0091EA;padding:6px;box-shadow:0px 2px 0px rgba(0,0,0,0.6);">
 <div class="container-fluid">
 <div class="row">
 <div class="col-sm-12 col-xs-12">
 <button style="padding:10px 20px;font-weight:bold;border-radius:5px;" class="btn btn-default btn-md hidden-sm hidden-lg trackPhone pull-left" onclick="window.location='tel:xxxxxxxxx'">
 <i class="fal fa-phone-alt"></i>&nbsp;&nbsp;xxx-xxx-xxxx
 </button>
 <button style="padding:10px 20px;font-weight:bold;border-radius:5px;" class="btn btn-success btn-md hidden-sm hidden-lg pull-right" onclick="window.location='quote'">
 <i class="fal fa-piggy-bank"></i>&nbsp;&nbsp;Get a Quote
 </button>
 </div>
 </div>
 </div>
</div>

下面的jQuery代码可以完美实现你的需求——页面加载时先隐藏按钮栏，当用户滚动超过800像素时平滑显示，滚动回顶部区域则再次隐藏。你只需要把这段代码放到页面的脚本区域（比如</body>标签之前）即可：

jQuery实现代码 #

$(document).ready(function() {
 $(window).on("load", function () {
 $(".footer-nav").css("display","none");
 });
 $(window).scroll(function(){
 if ($(window).scrollTop() > 800){
 $(".footer-nav").fadeIn('slow').show('fast');
 } else {
 $(".footer-nav").fadeOut('slow').hide('slow');
 }
 });
});

代码逻辑说明 #

• 页面加载完成后，立刻隐藏.footer-nav元素，保证初始状态下按钮栏不会显示；
• 监听页面的滚动事件，实时检测用户的滚动位置；
• 当滚动距离超过800像素时，用淡入动画显示按钮栏；滚动距离小于800像素时，用淡出动画隐藏按钮栏；
• 你可以根据自己页面的实际布局，调整800这个数值，来控制按钮栏显示的触发时机。

内容的提问来源于stack exchange，提问作者0111010001110000