Question

我目前正在处理涉及持久标头的一些代码。我的.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"});
       };

小提琴：http://jsfiddle.net/j5z5tdjy/4/

使用jQuery显示其他元素时更改元素

1 个答案: