滚动事件中Else if条件失效求助：仅If条件生效

Hey there! Let's break down why your else if clause isn't triggering and how to fix it.

The Root of the Problem #

Looking at your code, the issue likely comes from overlapping or misaligned conditions combined with a potential unvalidated variable:

$(window).on("scroll", function(e) { 
  let scroll = $(this).scrollTop(); 
  if (scroll > portfolio_button_container - 50) { 
    $(".portfolio-button-container").addClass("fixed-portfolio"); 
  } else if (scroll <= 3691) { 
    $(".portfolio-button-container").removeClass("fixed-portfolio"); 
    console.log("worked"); 
  } 
});

1. Undefined or incorrect portfolio_button_container value: If this variable isn't properly set to your element's actual top position (e.g., using $(".portfolio-button-container").offset().top), your first condition might always evaluate to true or false, blocking the else if from ever running.
2. Logical overlap: If portfolio_button_container - 50 is less than 3691, any scroll position between those two values will trigger the if condition first—your else if will only run when scroll is below portfolio_button_container - 50, not just when it's ≤3691.

Solutions to Try #

1. Use Element Position Instead of Fixed Values (Recommended)

Hardcoding 3691 is fragile—if your layout changes, this value will break. Instead, base your conditions on the actual position of your portfolio container:

// Calculate the container's top position once, outside the scroll event (better performance)
const portfolioContainerTop = $(".portfolio-button-container").offset().top;

$(window).on("scroll", function(e) {
  const scrollPos = $(this).scrollTop();
  
  // Add fixed class when scrolling past the container's top minus 50px
  if (scrollPos > portfolioContainerTop - 50) {
    $(".portfolio-button-container").addClass("fixed-portfolio");
  } 
  // Remove fixed class when scrolling back above that threshold
  else {
    $(".portfolio-button-container").removeClass("fixed-portfolio");
    console.log("worked");
  }
});

2. Keep the Fixed 3691 Value (If Necessary)

If you specifically need the 3691 threshold, adjust your conditions to ensure they don't overlap:

const portfolioContainerTop = $(".portfolio-button-container").offset().top;

$(window).on("scroll", function(e) {
  const scrollPos = $(this).scrollTop();
  
  // Only add fixed class if scroll is BOTH past the container threshold AND above 3691
  if (scrollPos > portfolioContainerTop - 50 && scrollPos > 3691) {
    $(".portfolio-button-container").addClass("fixed-portfolio");
  } 
  // Remove fixed class when scroll drops to 3691 or below
  else if (scrollPos <= 3691) {
    $(".portfolio-button-container").removeClass("fixed-portfolio");
    console.log("worked");
  }
});

Quick Checks to Verify #

• Log the value of portfolio_button_container to your console to make sure it's not undefined or an unexpected number.
• Test scrolling slowly through the page and log scrollPos alongside your conditions to see exactly which thresholds are being hit.

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