WordPress站点滚动显隐元素JS异常：向下正常向上跳内容求解决方案

Hey there! It sounds like you're off to a great start with your WordPress site—nice work taking on custom scroll interactions! The issue you're seeing with content skipping when scrolling up is super common with basic scroll event listeners, so let's break down why it happens and how to fix it.

Why the Skipping Happens #

When you scroll up, the scroll event fires rapidly, and if your current code only checks if the scroll position passes a certain point once (like when scrolling down), it might miss triggering the show/hide logic as you move back up. Also, without tracking scroll direction or debouncing the scroll event, you can get inconsistent behavior.

Improved jQuery Solution #

Let's adjust your code to track the previous scroll position, determine direction, and check element positions more reliably. Here's a revised version:

$(function() {
    // Initialize hidden elements
    $('#slide-twotitle, #slide-threetitle, #slide-fourtitle').hide();
    
    let prevScrollTop = $(window).scrollTop();
    
    $(window).on('scroll', function() {
        const currentScrollTop = $(this).scrollTop();
        const isScrollingDown = currentScrollTop > prevScrollTop;
        
        // Adjust the offset values (+100/+200) to fine-tune trigger points
        $('#slide-twotitle').toggle(
            isScrollingDown ? currentScrollTop > $('#slide-twotitle').offset().top - $(window).height() + 100 : currentScrollTop < $('#slide-twotitle').offset().top - $(window).height() + 200
        );
        
        $('#slide-threetitle').toggle(
            isScrollingDown ? currentScrollTop > $('#slide-threetitle').offset().top - $(window).height() + 100 : currentScrollTop < $('#slide-threetitle').offset().top - $(window).height() + 200
        );
        
        $('#slide-fourtitle').toggle(
            isScrollingDown ? currentScrollTop > $('#slide-fourtitle').offset().top - $(window).height() + 100 : currentScrollTop < $('#slide-fourtitle').offset().top - $(window).height() + 200
        );
        
        prevScrollTop = currentScrollTop;
    });
});

This code:

• Tracks whether you're scrolling up or down
• Uses direction-specific trigger points to prevent skipping
• Toggles elements based on their position relative to the viewport

Even Better: Use Intersection Observer (Modern Approach) #

For better performance (especially on WordPress sites with lots of plugins), the Intersection Observer API is the way to go. It's designed specifically for detecting when elements enter/exit the viewport, and it handles both scroll directions seamlessly without firing tons of events.

Here's how to implement it:

$(function() {
    // Initialize hidden elements
    $('#slide-twotitle, #slide-threetitle, #slide-fourtitle').hide();
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                $(entry.target).fadeIn();
            } else {
                $(entry.target).fadeOut();
            }
        });
    }, {
        rootMargin: '0px 0px -100px 0px', // Adjust to trigger show/hide earlier/later
        threshold: 0.1
    });
    
    // Observe each target element
    $('#slide-twotitle, #slide-threetitle, #slide-fourtitle').each(function() {
        observer.observe(this);
    });
});

This will automatically show elements when they enter the viewport (with a small margin adjustment) and hide them when they leave—no manual scroll position checks needed!

WordPress-Specific Tips #

• Enqueue your script properly: Instead of adding the script inline, add it to your theme's functions.php using wp_enqueue_script() to avoid conflicts with other plugins/themes.
• Add smooth transitions: For nicer animations, add CSS transitions to your elements:

#slide-twotitle, #slide-threetitle, #slide-fourtitle {
    transition: opacity 0.3s ease;
}

• Test for conflicts: If you still have issues, try disabling other plugins temporarily to see if something is interfering with your scroll logic.

Hope this fixes your scrolling issue—let me know if you need help tweaking the values or implementing any of this!

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