如何用jQuery实现滚动时隐藏一个按钮并显示另一个按钮

Got it, let's get this sorted for you! Your current code only handles adding/removing a class to the navigation, but we need to extend it to toggle the visibility of your two buttons based on the scroll position. Here's how to do it properly:

Step 1: Fix Your HTML First #

First, make sure you have both buttons in your markup—right now I only see the "Free Trial" button. Let's add the "Sign Up" button and give both unique IDs so we can target them easily. We'll also set the initial state: show the Sign Up button, hide the Free Trial button using Bootstrap's d-none class (or a custom CSS class if you prefer):

<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">
    <ul class="nav nav-pills right-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Sign In</a>
      </li>
      <!-- Add Sign Up button (initially visible) -->
      <li>
        <button id="signup-btn" class="outline" href="#">Sign Up</button>
      </li>
      <!-- Free Trial button (initially hidden) -->
      <li>
        <button id="freetrial-btn" class="outline d-none" href="change-driving-test">Free Trial</button>
      </li>
    </ul>
  </div>
</nav>
<!-- Added extra content to test scrolling behavior -->
<div style="height: 1000px;"></div>

Step 2: Update Your jQuery Scroll Logic #

Now we'll modify your scroll function to handle both the nav class toggle and the button visibility. We'll check if the scroll distance is over 423px:

• If yes: Hide the Sign Up button, show the Free Trial button, and keep the nav padding class.
• If no: Revert back to showing Sign Up, hiding Free Trial, and remove the nav padding class.

$(window).scroll(function() {
  // Get the current scroll position
  const scrollPos = $(document).scrollTop();
  
  // Toggle nav class (keep your existing logic)
  if (scrollPos > 423) {
    $('nav').addClass('navbar-padding');
    // Hide Sign Up, show Free Trial
    $('#signup-btn').addClass('d-none');
    $('#freetrial-btn').removeClass('d-none');
  } else {
    $('nav').removeClass('navbar-padding');
    // Show Sign Up, hide Free Trial
    $('#signup-btn').removeClass('d-none');
    $('#freetrial-btn').addClass('d-none');
  }
});

Alternative: Use Custom CSS Classes (If You Don't Want Bootstrap's d-none) #

If you prefer not to use Bootstrap's utility classes, you can define your own hidden class in CSS:

.hidden {
  display: none !important;
}

Then replace d-none with hidden in both the HTML and jQuery code.

Key Notes #

• We're using Bootstrap's d-none class because it's a reliable way to hide elements, but you can use any method you like (e.g., toggle() in jQuery, but using classes is more maintainable).
• I cleaned up an extra closing </div> tag in your original HTML that would have caused layout issues.
• The tall div at the bottom lets you test the scrolling behavior easily without needing extra page content.

内容的提问来源于stack exchange，提问作者Matt H