Question

我正在尝试修改以下jQuery，以便在加载网站时触发，而不是滚动。（这是针对站点顶部的消息横幅。我一直想要它，而不仅仅是滚动时。（test.micahbickford.com）

    jQuery(function( $ ){
// Add reveal class to utility bar after 50px
    $(document).on("scroll", function(){
        var height = $(".utility-bar")[0].clientHeight;
        if($(document).scrollTop() >= 0){
            $(".site-header.dark").css("top",height+"px");
            $(".utility-bar").addClass("reveal");

        } else {
            $(".site-header.dark").css("top",0+"px");
            $(".utility-bar").removeClass("reveal");
        }
    });
});

我尝试将“滚动”改为“加载”和“准备好”，但这只会使横幅完全消失。

Answer 1

您编写的第一个事件处理程序

jQuery(function () {
  // code here
})

只是更详细的“ready”事件处理程序

的快捷方式

$(document).ready(function () {
  // code here
})

当DOM完全加载时执行此事件处理程序。

在您的示例中，如果您只希望在加载页面而不是滚动时执行代码，则只需删除滚动事件处理程序

jQuery(function( $ ){
    // Add reveal class to utility bar after 50px
    var height = $(".utility-bar")[0].clientHeight;
    if($(document).scrollTop() >= 50){
        $(".site-header.dark").css("top",height+"px");
        $(".utility-bar").addClass("reveal");

    } else {
        $(".site-header.dark").css("top",0+"px");
        $(".utility-bar").removeClass("reveal");
    }
});

我确实将if（）的条件更改为高于或等于50而不是0.我认为这样更有意义。

但是，在这种情况下，当我们滚动时，脚本在50px之后失去了将揭示 CSS类添加到实用工具栏的功能。

也许您真正想要的是保留滚动事件处理程序，但要确保其中的代码也在页面加载时执行。有很多方法可以做到这一点，但在这种情况下，我们可以保持滚动事件处理程序并在滚动事件处理程序绑定后触发滚动事件。

jQuery(function( $ ){
    // Add reveal class to utility bar after 50px
    $(document).on("scroll", function(){
        var height = $(".utility-bar")[0].clientHeight;
        if($(document).scrollTop() >= 50){
            $(".site-header.dark").css("top",height+"px");
            $(".utility-bar").addClass("reveal");
        } else {
            $(".site-header.dark").css("top",0+"px");
            $(".utility-bar").removeClass("reveal");
        }
    });

    $(document).trigger('scroll');
});

最后一点，如果您真正想要的是保持横幅相同并始终位于视口的顶部，则可以使用一些非常简单的CSS替换此脚本，如

.utility-bar { position: fixed; top: 0; left: 0; width: 100%; }

将站点加载到滚动时将jQuery更改为触发器

1 个答案: