2013-04-02 24 views
1

我是jQuery的新手,所以我一直在學習。滾動衝突的jQuery淡出

在我創建的網站上有兩個看起來有衝突的功能:第一個功能是當用戶開始滾動時網站的標題淡出,第二個功能用於平滑滾動瀏覽主題在頁面上。 即使沒有用戶滾動,第二個腳本也會使淡出腳本直接運行。

這裏是一個小提琴是給出了這個概念: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 []; 
    } 

}); 

誰能幫助?

在此先感謝。

編輯:小提琴鏈接已經修復

+0

你搗鼓壞了! – thomas

+0

在jsfiddle中編寫代碼後點擊更新/保存按鈕 –

回答

3

只保留一個document.ready功能,而不是兩個

+0

謝謝,我試過了,但它沒有幫助。 – Frank78