javascript - 使用 jQuery 在其他元素可见时更改元素

Question

我目前正在编写一些涉及持久 header 的代码。当我的 .floatingHeader 是 visible 时，我是否可以让原始的 hidden 成为可能？

目前当我滚动页面时，我的代码是:

<h2 class="persist-header">Some Other Area</h2>
<h2 class="persist-header floatingHeader" style="width: 545px; visibility: visible;">Some Other Area</h2>

但我可以将其更改为:

<h2 class="persist-header" style="visibility: hidden">Some Other Area</h2>
<h2 class="persist-header floatingHeader" style="width: 545px; visibility: visible;">Some Other Area</h2>

这是我的 Javascript:

function UpdateTableHeaders() {
    $(".persist-area").each(function() {
        var el = $(this),
            offset = el.offset(),
            scrollTop = $(window).scrollTop(),
            floatingHeader = $(".floatingHeader", this)

        if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
            floatingHeader.css({
                "visibility": "visible"
            });
        } else {
            floatingHeader.css({
                "visibility": "hidden"
            });
        };
    });
}

// DOM Ready
$(function() {
    var clonedHeaderRow;
    $(".persist-area").each(function() {
        clonedHeaderRow = $(".persist-header", this);
        clonedHeaderRow
            .before(clonedHeaderRow.clone())
            .css("width", clonedHeaderRow.width())
            .addClass("floatingHeader");
        });

    $(window)
        .scroll(UpdateTableHeaders)
        .trigger("scroll");
});

这是演示:http://jsfiddle.net/j5z5tdjy/

Answer 1

试试这个。

       if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
           floatingHeader.css({
            "visibility": "visible"
           });
           floatingHeader.prev().css({"visibility":"hidden"});
       } else {
           //$(".persist-header").css({"visibility":"visible"});
           floatingHeader.css({
            "visibility": "hidden"
           });
           floatingHeader.prev().css({"visibility":"visible"});
       };

fiddle :http://jsfiddle.net/j5z5tdjy/4/