Question

我有一个固定的导航栏脚本，在滚动时效果很好，但是如果重新加载页面，则直到再次滚动时，固定的导航才会激活。当它不在顶部时，我需要激活它。如何在不始终激活的情况下向其添加“页面加载”代码？诸如“当从顶部滚动1像素然后激活时”？

$(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

仅提取该类功能，然后在页面加载时再次执行该功能，

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

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();
});

Answer 2

您可以将函数传递给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);

如何在此代码中添加“页面加载”？

2 个答案: