隐藏，一个按钮 - 然后显示另一个按钮，但使用 jQuery 隐藏原始按钮

Question

我知道如何使用 jQuery 在滚动时添加类，但我一直坚持如何隐藏整个按钮，然后在 > 423 滚动时显示另一个按钮。我想最初显示我的注册按钮，然后在滚动时显示我的免费试用按钮。我四处寻找答案，这些答案似乎接近我想要的，但又不是我想要的。

$(window).scroll(function() {
  if ($(document).scrollTop() > 423) {
    $('nav').addClass('navbar-padding');
  } else {
    $('nav').removeClass('navbar-padding');
  }
});

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet">
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js" integrity="sha384-lZmvU/TzxoIQIOD9yQDEpvxp6wEU32Fy0ckUgOH4EIlMOCdR823rg4+3gWRwnX1M" crossorigin="anonymous"></script>  



<nav class="navbar navbar-default fixed-top navbar-toggleable-md navbar-light bg-faded">
 <div class="container-fluid" style="margin-bottom:900px;">
<ul class="nav nav-pills right-nav">
<li class="nav-item">
<a class="nav-link" href="#">Sign In</a>
</li>
<li>
<button id="hide-show-cta" class="outline" href="change-driving-test">Free Trial</button>
</li> 
</ul>
</div>
</div>

Answer 1

您可以：

在您想要的滚动点的两个按钮上执行 .show() and/or .hide()。
Add/remove css 类到你想要的滚动点的按钮（显示和隐藏它们）。

类似于：

$(window).scroll(function() {
    if ($(document).scrollTop() > 423) {
        $("#signin").hide();
        $("#trial").show();
    } else {
        $("#signin").show();
        $("#trial").hide();
    }
});

这是一个工作示例：https://jsfiddle.net/wmax30an/

只知道这是非常基本的。它还存在在每次滚动时都会触发那些 hide/show 操作的问题，因此您可能需要添加一些内容来防止这种情况发生。

隐藏，一个按钮 - 然后显示另一个按钮，但使用 jQuery 隐藏原始按钮

Hide, one button - then show another but hide the original with jQuery

jquery

scroll

show-hide