如何在PC端将isotope.js过滤导航栏固定于左侧（适配移动端）

Got it, let's get that isotope filter navigation locked to the left on desktop while keeping your mobile layout totally intact. Here's a practical, Bootstrap-friendly approach that plays nicely with your framework-y setup:

1. Adjust the HTML Structure #

First, wrap your filter navigation and image gallery in a Bootstrap row to leverage its responsive grid. This lets us split the layout on desktop and stack it automatically on mobile:

<div class="container">
  <div class="row">
    <!-- Isotope Filter Navigation -->
    <div class="isotope-filter-container col-md-3">
      <ul class="filter-nav">
        <li data-filter="*">All</li>
        <li data-filter=".category-1">Nature</li>
        <li data-filter=".category-2">City</li>
        <!-- Add your other filter options here -->
      </ul>
    </div>

    <!-- Image Gallery Container -->
    <div class="isotope-gallery-container col-md-9">
      <div class="isotope-grid">
        <!-- Your isotope gallery items go here -->
        <div class="grid-item category-1"><img src="nature-shot.jpg" alt="Nature landscape"></div>
        <div class="grid-item category-2"><img src="city-skyline.jpg" alt="City skyline"></div>
      </div>
    </div>
  </div>
</div>

2. Add Responsive CSS #

Use a media query to target desktop screens (we’ll use Bootstrap’s md breakpoint as the cutoff, feel free to adjust it). We’ll fix the navigation to the left, make it full-height, and tweak spacing to avoid layout overlap:

/* Mobile layout - keep your existing base styles here */
.isotope-filter-container {
  margin-bottom: 2rem; /* Maintain spacing for mobile */
}

/* Desktop layout - activate when screen is 768px or wider */
@media (min-width: 768px) {
  .isotope-filter-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 25%; /* Matches Bootstrap's col-md-3 width */
    height: 100vh; /* Full viewport height */
    overflow-y: auto; /* Let users scroll if filter list is long */
    padding: 2rem;
    background: #fff; /* Match your site's background color */
    box-shadow: 1px 0 5px rgba(0,0,0,0.1); /* Optional: add subtle depth */
  }

  .isotope-gallery-container {
    margin-left: 25%; /* Push gallery right to avoid overlapping fixed nav */
    padding: 2rem;
  }
}

3. Tweak Isotope Initialization #

Since we’re modifying the layout on resize, we need to tell Isotope to recalculate the grid when the viewport changes. Add this snippet to your existing isotope setup:

// Initialize Isotope
var $grid = $('.isotope-grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'masonry'
});

// Refresh layout on window resize to account for fixed nav
$(window).on('resize', function() {
  $grid.isotope('layout');
});

// Keep your existing filter click handler
$('.filter-nav li').on('click', function() {
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});

4. Test & Fine-Tune #

• Resize your browser to check the mobile/desktop switch works smoothly
• Adjust the min-width in the media query if you want the fixed nav to kick in at a different screen size
• Tweak width, padding, and margin values to match your site’s design system

This setup keeps your mobile layout untouched while making the filter navigation persistent on desktop—perfect for users scrolling through your image gallery!

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