javascript - 为什么replaceWith() 的触发方式与css() 不同？

Question

当您滚动到图像顶部时，我试图触发固定 div 内容的更改。

$(window).scroll(function() {
    var y_scroll_pos = window.pageYOffset;

    var img_position = $('img').position();

    if(y_scroll_pos > img_position.top) {
        $(".fixed").replaceWith(
            "<p>Goodbye!</p>"
        );
    }

    else {
        $(".fixed").replaceWith(
            "<p>Hello!</p>"
        );
    }

[...]

仅当您的窗口在加载时滚动到该点或以下时，这才有效，即使 window.pageYOffset 显然在您滚动时不断变化。

但是这个带有 css() 的示例发生了应有的变化。

if(y_scroll_pos > img_position.top) {
        $(".fixed").css(
            "background-color","red";
        );
    }

    else {
        $(".fixed").css(
            "background-color","yellow";
        );
    }

[...]

为什么？这两种方法有什么区别？

Answer 1

当您只能更改所需内容时，为什么要完全更改 HTML？

jQuery(function( $ ){ // (DOM is now ready)

    var $img = $('img');                 // Cache your elements outside of expensive
    var $fixedP = $('.fixed').find("p"); // scroll events

    $(window).scroll(function() {
        var pastTop = window.pageYOffset > $img.position(); // Boolean value        
        $fixedP.text(pastTop ? "Goodbye!" : "Hello!" )
               .css({background: pastTop ? "red" : "yellow"});
    }

});