如何在移动设备上向上/向下滚动后"Show/Hide"引导 3 内容？

Question

我正在尝试创建一个HTML元素，该元素仅在移动设备上显示两个号召性用语按钮。一个按钮是呼叫我们，另一个是报价按钮。

当前代码将显示该栏，但是由于我已经在页面顶部有电话号码，因此我想在用户开始向下滚动页面后显示此号召性用语栏。

不幸的是，我不擅长jQuery来解决这个问题。我很确定这很简单，但我不知道正确的术语可以指出我有类似想法的其他人的正确 Stackoverflow 帖子。

<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代码，适用于遇到相同问题或想要为移动设备做相同概念的任何人。非常感谢格哈德@Tim的帮助。

$(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');
}
});
});

Answer 1

好吧，我不想为你做所有的工作，但我想我为你做了一个小例子，应该引导你走向正确的方向。

您可以使用$(window).scroll(function(){})来检测某人何时滚动。使用$(window).scrollTop()，您将获得当前的滚动偏移量。在我的示例中，我只是检查此偏移量是否大于 1，如果是，则显示按钮。其他的，我把它藏起来。

现在你可以用这个例子做各种各样的事情。您可以添加动画，应用css。无论什么。我把这个留给你。

<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 id="ctaButton" 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>
$(function() {
$(window).scroll(function(){
if ($(window).scrollTop() > 1){
$("#ctaButton").show();
} else {
$("#ctaButton").hide();
}
});
});

我还给你做了一个js小提琴。点击这里