Question

我需要声明我不是JQuery或Java程序员。此代码包含在Bootstrap模板中，我甚至不确定从哪里开始修复此错误。

问题

当用户在窗口中向下滚动时，标题会变得粘滞/固定并且背景淡入。当页面重新加载到顶部以下时，该淡出的背景不存在并且在用户开始之前不会显示在页面上滚动。因此，您无法看到标题，除了白色字母位于页面上另一个元素之上的位置。

代码

jQuery(document).ready(function( $ ) {

  // Header fixed and Back to top button
  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      $('.back-to-top').fadeIn('slow');
      $('#header').addClass('header-fixed');
    } else {
      $('.back-to-top').fadeOut('slow');
      $('#header').removeClass('header-fixed');
    }
  });
  $('.back-to-top').click(function(){
    $('html, body').animate({scrollTop : 0},1500, 'easeInOutExpo');
    return false;
  });

问题

现在，当我查看这个JQuery脚本时，我对代码的基本理解告诉我，只有当用户按此行滚动时才会运行此代码：$(window).scroll(function() {

我的问题是，是否可以将此块代码重构为两个独立函数（一个用于标题，一个用于“返回顶部”按钮），这些函数在滚动和页面加载时调用。

同样，我使用其他语言编程，并且只有很少的JQuery，JavaScript和CoffeeScript知识。有人可以帮助我使用这个重构来删除这个bug吗？谢谢。

Answer 1

我没有测试过这个，但我想你想要这样的东西：

function headerStuff(){
  if ($(window).scrollTop() > 100) {
     $('.back-to-top').fadeIn('slow');
     $('#header').addClass('header-fixed');
  } 
  else {
    $('.back-to-top').fadeOut('slow');
    $('#header').removeClass('header-fixed');
  }
};

$(document).ready(function() {
  headerStuff();
  $(window).scroll(function(){
    headerStuff();
  });
  $('.back-to-top').click(function(){
    $('html, body').animate({scrollTop : 0},1500, 'easeInOutExpo');
    return false;
  });
});

固定标题未显示在页面重新加载上

1 个答案: