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

I know how to add classes on scroll with jQuery, but I'm stuck onto how to hide one whole button, then show another on > 423 on scroll for example. I'm wanting to initially show my sign-up button, then show my free trial button when scrolled. I've searched around for the answers which have seemed to be nearly what I want, but not quite what I want.

$(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>

Solution

You can either:

do a .show() and/or .hide() on the two buttons at the scroll spot you want.
Add/remove css classes to the buttons (to show and hide them) at the scroll spot you want.

Something like:

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

Here's a working example: https://jsfiddle.net/wmax30an/

Just know that that's pretty basic. It also has the issue where it's firing those hide/show actions on every scroll, so you may want to add something to prevent that.