隐藏，一个按钮 - 然后显示另一个，但使用 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() 和/或.hide()。
• 在您想要的滚动位置向按钮添加/删除 CSS 类（以显示和隐藏它们）。

类似：

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

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

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