如何在移动设备上向上/向下滚动后“显示/隐藏”Bootstrap 3 内容？

Posted 2023-05-08

【中文标题】如何在移动设备上向上/向下滚动后“显示/隐藏”Bootstrap 3 内容？

【英文标题】：How to "Show/Hide" Bootstrap 3 content after scrolling Up/Down on Mobile device?

【发布时间】：2020-01-03 10:17:18

【问题描述】：

我正在尝试创建一个仅在移动设备上显示两个号召性用语按钮的 html 元素。一个按钮是给我们打电话，另一个是报价按钮。

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

不幸的是，我不擅长使用 jQuery 来解决这个问题。而且我很确定这很简单，但我不知道正确的术语可以将我指向具有相似想法的其他人的正确 *** 帖子。

<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 Gerhard 的帮助。

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

);

【参考方案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();
        
    );
);

我还给你做了一个 jsFiddle。点击here

【讨论】：

谢谢。这是一个很大的帮助。这是我添加的内容，它有效:) $(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'); ); );

很高兴能帮上忙 :)