为什么 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 在加载时滚动到该点或以下时才有效，即使 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"});
    }

});

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

Why does replaceWith() not trigger the same way as css()?

javascript

jquery

dom

replacewith