页面刷新时如何显示滚动的导航栏？答案

【问题标题】：How to display a scrolled navbar when page refresh?页面刷新时如何显示滚动的导航栏？
【发布时间】：2020-01-22 15:23:05
【问题描述】：

所以我得到了这个脚本：

$(function() {
  var header = $(".header-nav");
  $el = $(".header_logo a").clone().addClass('cloned');

  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 50) {
      header.addClass("scrolled");
    } else {
      header.removeClass("scrolled");
    }

    if (scroll > 50) {
      $el.appendTo(".header-logo");
    } else {
      $('.cloned').remove();
    }
  });
});

它使导航栏固定在滚动和克隆标志上并在首页重置它。

但是如果我在中间刷新页面，导航栏不会显示，因为它只在滚动时显示。

请问有办法解决吗？

谢谢。

【问题讨论】：

也许你可以从滚动中拉出回调函数。给它起一个名字，比如checkScrollHeader。在滚动参数scroll(checkScrollHeader) 中使用它。加载时致电checkScrollHeader？
检查页面加载时的 scroll 值并根据该值执行操作。

标签： javascript jquery scroll navbar

【解决方案1】：

正如 Evolutionxbox 建议的那样，您应该将代码移动到一个函数中，并在滚动和加载时调用它，如下所示：

$(function() {
  var header = $(".header-nav");
  $el = $(".header_logo a").clone().addClass('cloned');
  myScroller();

  $(window).scroll(function() {
    myScroller();  
  });

  function myScroller(){
    var scroll = $(window).scrollTop();
    if (scroll >= 50) {
      header.addClass("scrolled");
    } else {
      header.removeClass("scrolled");
    }

    if (scroll > 50) {
      $el.appendTo(".header-logo");
    } else {
      $('.cloned').remove();
    }
  }
});

【讨论】：