Javascript 固定头逻辑

当用户滚动到页眉之外时，我正在修复页面的页眉

还有另一个条件，即在显示复选框之前单击复选框。复选框类是“列表项”。这很好用

第三部分是。如果用户滚动然后单击复选框，则在该条件下标题需要出现/消失。显然，我的函数都是基于croll的，我不知道如何在中构建此功能

    stickyUseTools : function() {
        var stickyTools = $j('#sticky-usetools');
        if (stickyTools.length > 0 && window.outerWidth > 425) {
            var headerHeight = stickyTools.height();
            var fixmeTop = stickyTools.offset().top + headerHeight - 50;
            $j(window).scroll(function() {
                var currentScroll = $j(window).scrollTop();
                if (currentScroll >= fixmeTop && ($j(".list-item").length == 0 || $j(".list-item:checked").length > 0)) {
                    stickyTools.addClass('sticky');
                } else {
                    stickyTools.removeClass('sticky');
                }
            });
        }
    }
};

定义（本地）全局布尔变量，并在复选框更改时进行更新：

var checkBoxStatus=false;

// Initiate the variable if you want to be true:

$j(document).ready(function(){
    if ($j(".list-item").length == 0){ 
        checkBoxStatus=true;
    }
})

//Listen to checkbox changes
$j(".list-item").change(function(){
    if ($j(".list-item:checked").length > 0){ 
        checkBoxStatus=true;
    }else{
        checkBoxStatus=false;
    }

    // Trigger a fake scroll event to dispatch new changes
    // $j(document).get(0).dispatchEvent(new Event('scroll'));
    // If the above code not works try this:
    window.scrollTo(window.scrollX, window.scrollY - 1);
    window.scrollTo(window.scrollX, window.scrollY + 1);
})

最后替换逻辑中的

复选框status

：

stickyUseTools : function() {
    var stickyTools = $j('#sticky-usetools');
    if (stickyTools.length > 0 && window.outerWidth > 425) {
        var headerHeight = stickyTools.height();
        var fixmeTop = stickyTools.offset().top + headerHeight - 50;
        $j(window).scroll(function() {
            var currentScroll = $j(window).scrollTop();
            if (currentScroll >= fixmeTop && checkBoxStatus) {
                stickyTools.addClass('sticky');
            } else {
                stickyTools.removeClass('sticky');
            }
        });
    }
}

---

你可以用CSS来完成

根据复选框是否选中，将类添加/删除到

#sticky usetools

应用

位置：粘性；排名：0到
#粘性使用工具
如果它有上一个类

---

PS：根据所需的兼容性

根据您的代码，您已将滚动事件附加到窗口。您需要为复选框附加onChange事件，并相应地显示和隐藏标题。这似乎不起作用。它似乎没有触发假卷轴。如果我选中一个复选框，则可以滚动。我已经用一个新的技巧编辑了答案，以模拟假滚动。@J00谢谢，可以。现在唯一的问题是，当页面加载且其中一个复选框已选中时，它不会显示粘性标题-仅当您开始滚动时。我需要那个逻辑也在页面加载中。在窗口加载事件中也触发一个假滚动@j00m