浮动粘性侧边栏功能异常，需实现类似jquery.pin的固定滚动效果

Hey there! I’ve got a straightforward, plugin-free jQuery solution that’ll make your sidebar behave exactly like the example you’re referencing—sticking when you scroll to it, and moving up with the page once it hits the footer. Let’s break this down step by step.

First, Let’s Set Up the Core Structure #

I’ll start with a standard HTML/CSS/jQuery setup that matches your requirements (adjust classes/IDs to match your existing code):

HTML #

<div class="page-container">
  <div class="main-content">
    <!-- Add your long main content here to enable scrolling -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ... (repeat to make content long enough)</p>
  </div>
  <aside class="sticky-sidebar" id="custom-sidebar">
    <button class="sidebar-toggle">Toggle Sidebar</button>
    <div class="sidebar-inner">
      <!-- Your sidebar content goes here -->
      <h3>Sidebar Content</h3>
      <p>Sticky behavior test</p>
    </div>
  </aside>
</div>
<footer class="site-footer">
  <!-- Footer content -->
  <h2>Site Footer</h2>
</footer>

CSS #

.page-container {
  display: flex;
  gap: 2rem;
  max-width: 1280px;
  margin: 0 auto;
  position: relative; /* Critical for absolute positioning later */
}

.main-content {
  flex: 1;
  min-height: 2200px; /* Simulate long content */
  padding: 1rem;
}

.sticky-sidebar {
  width: 320px;
  background: #f8f9fa;
  padding: 1.5rem;
  display: none; /* Initial hidden state */
  top: 0;
  transition: all 0.2s ease; /* Smooth position transitions */
}

/* Sticky state: fixed to top */
.sticky-sidebar.is-sticky {
  position: fixed;
  top: 20px; /* Adjust this to set how far from top it sticks */
}

/* Bottom state: locked above footer */
.sticky-sidebar.is-bottom {
  position: absolute;
  top: auto;
  bottom: 0;
}

.site-footer {
  height: 350px;
  background: #2d3748;
  color: white;
  padding: 2rem;
  margin-top: 2rem;
}

jQuery Code #

This is the logic that makes everything work—no extra plugins needed:

$(document).ready(function() {
  // Toggle sidebar visibility
  $('.sidebar-toggle').on('click', function() {
    $('#custom-sidebar').toggle();
    // Recheck position immediately if sidebar is shown
    if ($('#custom-sidebar').is(':visible')) {
      updateSidebarPosition();
    }
  });

  // Listen for scroll and resize events
  $(window).on('scroll resize', function() {
    // Only run if sidebar is visible
    if ($('#custom-sidebar').is(':visible')) {
      updateSidebarPosition();
    }
  });

  // Core position calculation function
  function updateSidebarPosition() {
    const sidebar = $('#custom-sidebar');
    const sidebarHeight = sidebar.outerHeight();
    const footer = $('.site-footer');
    const footerTop = footer.offset().top;
    const scrollTop = $(window).scrollTop();
    const windowHeight = $(window).height();
    
    // The point where sidebar should start sticking (top of sidebar minus sticky offset)
    const stickyStartPoint = sidebar.offset().top - 20;
    // The lowest point the sidebar can stick before hitting the footer
    const maxStickyBottom = footerTop - sidebarHeight - 20; // 20px gap above footer

    if (scrollTop >= stickyStartPoint) {
      if (scrollTop + windowHeight > maxStickyBottom) {
        // Lock sidebar just above footer
        sidebar.removeClass('is-sticky').addClass('is-bottom');
        sidebar.css('top', maxStickyBottom - stickyStartPoint + 'px');
      } else {
        // Keep sidebar fixed to top
        sidebar.addClass('is-sticky').removeClass('is-bottom');
        sidebar.css('top', '20px');
      }
    } else {
      // Reset to normal position
      sidebar.removeClass('is-sticky is-bottom');
      sidebar.css('top', '0');
    }
  }
});

How This Works #

Let’s break down the key parts so you can tweak it to your needs:

• Toggle Function: Shows/hides the sidebar, and triggers a position check right away if it’s shown.
• Scroll/Resize Listeners: Only run the position logic when the sidebar is visible to save performance.
• Position Calculation:
  1. Sticky Start: When you scroll past the top of the sidebar, it switches to fixed position.
  2. Footer Collision Check: When the sidebar would overlap the footer, it switches to absolute positioning and locks itself just above the footer. As you keep scrolling, it moves up with the page.
  3. Reset: When you scroll back up past the sidebar’s original position, it goes back to its normal flow.

Quick Adjustments You Might Need #

• Change the 20px values in CSS and jQuery to adjust how far the sidebar sits from the top and footer.
• If your sidebar has dynamic content (like loaded via AJAX), call updateSidebarPosition() after the content loads to recalculate its height.
• Make sure the sidebar’s parent container has position: relative—this is needed for the absolute positioning to work correctly.

This solution is lightweight, easy to modify, and doesn’t require any external plugins—perfect if you’re still getting comfortable with jQuery.

内容的提问来源于stack exchange，提问作者Aayush Dahal