Hey there! Let's figure out why your scroll-blocking code isn't working, and fix it while keeping that header alignment intact.

First, let's recap your setup: you added overflow-y: scroll to the body to stop the fixed header from shifting when switching between long/short pages. Now you want to block page scrolling when a semi-transparent overlay is shown, but $(document.body).css('overflow-y','hidden') isn't doing the trick. Here are the most common fixes and improvements:

1. Double-check your jQuery setup and event binding #

First, make sure your code is wrapped in a DOM-ready handler, and your button click event is properly bound. A common mistake is running code before the DOM is loaded. Try this structure:

$(document).ready(function() {
  // Bind click event to your button
  $('#your-button-id').on('click', function() {
    // Show your overlay first
    $('.overlay').fadeIn();
    // Now block body scrolling
    $('body').css('overflow-y', 'hidden');
  });

  // Don't forget to re-enable scrolling when closing the overlay
  $('.overlay').on('click', function() {
    $(this).fadeOut();
    $('body').css('overflow-y', 'scroll');
  });
});

If this still doesn't work, open your browser's dev tools (F12) and check the Console tab for any syntax errors or missing jQuery references.

2. Fix the header shift caused by scrollbar disappearance #

When you switch from overflow-y: scroll to hidden, the browser's scrollbar disappears, which makes the page width jump slightly—and that's probably causing your header to shift again. To fix this, we can add a padding-right to the body equal to the width of the scrollbar, so the page width stays consistent:

$(document).ready(function() {
  // Calculate scrollbar width once
  const getScrollbarWidth = () => window.innerWidth - document.documentElement.clientWidth;

  $('#your-button-id').on('click', function() {
    const scrollbarWidth = getScrollbarWidth();
    $('body').css({
      'overflow-y': 'hidden',
      'padding-right': `${scrollbarWidth}px`
    });
    $('.overlay').fadeIn();
  });

  $('.overlay').on('click', function() {
    $(this).fadeOut();
    $('body').css({
      'overflow-y': 'scroll',
      'padding-right': '0'
    });
  });
});

This keeps the page width stable, so your fixed header won't shift when the overlay is active.

3. Alternative: Use position: fixed to avoid scrollbar jumps entirely #

If you want to skip the scrollbar width calculation, another reliable method is to fix the body in place when the overlay is shown. This blocks scrolling and maintains the page's visual state:

$(document).ready(function() {
  $('#your-button-id').on('click', function() {
    // Save the current scroll position so we can restore it later
    const scrollPosition = $(window).scrollTop();
    $('body').css({
      'position': 'fixed',
      'top': `-${scrollPosition}px`,
      'width': '100%'
    });
    $('.overlay').fadeIn();
  });

  $('.overlay').on('click', function() {
    $(this).fadeOut();
    // Restore the scroll position
    const scrollPosition = parseInt($('body').css('top')) * -1;
    $('body').css({
      'position': 'static',
      'top': 'auto',
      'width': 'auto'
    });
    $(window).scrollTop(scrollPosition);
  });
});

This method avoids any page width changes, so your header will stay perfectly aligned.

Pick the solution that fits your setup best—start with checking your event binding, then address the scrollbar shift issue if that's part of your problem.

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