滚动冲突时 jQuery 淡出

Question

我是 jQuery 新手，因此我正在不断学习。

在我创建的网站上，有两个功能似乎相互冲突:第一个功能是当用户开始滚动时网站标题会淡出，第二个功能是在 anchor 之间平滑滚动这一页。第二个脚本使淡出脚本立即运行，即使用户不滚动。

这是一个展示这个想法的 fiddle :http://jsfiddle.net/Mvf67/284/

这是代码:

// fade out
$(document).ready(function () {
    $(window).scroll(function () {
        $(".title").fadeOut(1000);
    });
});

// smooth scroll
$(document).ready(function () {
    function filterPath(string) {
        return string.replace(/^\//, '')
        .replace(/(index|default).[a-zA-Z]{3,4}$/, '')
        .replace(/\/$/, '');
    }
    var locationPath = filterPath(location.pathname);
    var scrollElem = scrollableElement('html', 'body');

    $('a[href*=#]').each(function () {
        var thisPath = filterPath(this.pathname) || locationPath;
        if (locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/, '')) {
            var $target = $(this.hash),
            target = this.hash;
            if (target) {
                 var targetOffset = $target.offset().top;
                 $(this).click(function (event) {
                     event.preventDefault();
                     $(scrollElem).animate({
                         scrollTop: targetOffset
                     }, 1500, function () {
                         location.hash = target;
                     });
                 });
            }
       }
  });

  function scrollableElement(els) {
      for (var i = 0, argLength = arguments.length; i < argLength; i++) {
          var el = arguments[i],
          $scrollElement = $(el);
          if ($scrollElement.scrollTop() > 0) {
              return el;
          } else {
              $scrollElement.scrollTop(1);
              var isScrollable = $scrollElement.scrollTop() > 0;
              $scrollElement.scrollTop(0);
              if (isScrollable) {
                  return el;
              }
          }
      }
      return [];
   }

});

有人可以帮忙吗？

提前致谢。

编辑: fiddle 链接已修复

Answer 1

仅保留一个 document.ready 函数，而不是两个