如何在此代码中添加“on pageload”？

Question

我有一个固定的导航栏脚本，当我滚动时它可以正常工作，但是如果我重新加载页面，则在我再次滚动之前不会激活固定导航。当它不在顶部时，我需要激活它。如何在不始终激活它的情况下向其添加“页面加载”代码？类似于“从顶部滚动 1px 时然后激活”？$(window).scroll(function() {         var scroll = $(window).scrollTop();    if (scroll > 0) {        $("#top").addClass("scroll");        $(".nav li a").addClass("scroll");        $(".logo").addClass("scroll");        $(".menu").addClass("scroll");    }    else {        $("#top").removeClass("scroll");        $(".nav li a").removeClass("scroll");        $(".logo").removeClass("scroll");        $(".menu").removeClass("scroll");    }});

Answer 1

您可以将一个函数传递给 jQuery 以在页面加载时执行。$(function)您可以将匿名回调提取到命名函数并将其用于这两种情况。

function handleScroll() {     

    var scroll = $(window).scrollTop();

    if (scroll > 0) {

        $("#top").addClass("scroll");

        $(".nav li a").addClass("scroll");

        $(".logo").addClass("scroll");

        $(".menu").addClass("scroll");

    }

    else {

        $("#top").removeClass("scroll");

        $(".nav li a").removeClass("scroll");

        $(".logo").removeClass("scroll");

        $(".menu").removeClass("scroll");

    }

}

$(handleScroll);

$(window).scroll(handleScroll);

Answer 2

只需提取该类功能并在页面加载时再次执行它？，

（选择器也有优化的空间，你可以缓存它们）

function checkScroll() {

 var scroll = $(window).scrollTop();

 if (scroll > 0) {

    $("#top").addClass("scroll");

    $(".nav li a").addClass("scroll");

    $(".logo").addClass("scroll");

    $(".menu").addClass("scroll");

  }

  else {

    $("#top").removeClass("scroll");

    $(".nav li a").removeClass("scroll");

    $(".logo").removeClass("scroll");

    $(".menu").removeClass("scroll");

  }

}

$(window).scroll(function() {     

  checkScroll();

});

$( document ).ready(function() {

  checkScroll();

});