2014-11-05 58 views
0

我在Firefox中遇到了一個奇怪的問題。 我已經應用了一些js到這個網站的標頭http://devignstudios.nl/,所以當用戶向下滾動頁面時,標題總是很粘。 粘性頭可以在除Firefox以外的所有瀏覽器中正常工作。 我試圖找到解決方案,但找不到合適的答案。Mozilla Firefox中的CSS/JS問題

以下是JS

var stickyNavTop = $('#header').offset().top; 
      var stickyNav = function(){ 
      var scrollTop = $(window).scrollTop(); 

      if (scrollTop > stickyNavTop) { 
       $('#header').addClass('sticky'); 
      } else { 
       $('#header').removeClass('sticky'); 
      } 
      }; 

      stickyNav(); 

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

這裏的任何幫助將不勝感激。

提前致謝!

+1

在windows 7上firefox 33.0.2正常工作。 – sticksu 2014-11-05 18:40:53

+0

js在哪裏? – cport1 2014-11-05 18:41:56

+0

它在Android瀏覽器上無法正常工作 – myfunkyside 2014-11-05 18:45:20

回答

0

它與scrollTop函數有關,該函數在應用於id和類時不適用於firefox的所有情況。 試試這個:http://jsfiddle.net/rHmAA/7/

這是你的sticky div的修改版本。 (供將來參考) 該腳本使用#stickyheader作爲包裝。

$(document).ready(function() { 
$('a[href^="#"]').bind('click.smoothscroll', function (e) { 
    e.preventDefault(); 

    var target = this.hash, 
     $target = $(target); 

    var offset; 
    if ($('#stickyheader').css('position') == 'relative') { 
     offset = $('#stickyheader').outerHeight(true) * 2; 
    } else { 
     offset = $('#stickyheader').outerHeight(true); 
    } 
    console.log("offset: " + offset); 
    var $parent = $target.offsetParent(); 
    console.log("$target.offset().top " + $target.offset().top); 

    $('#wrapper').animate({ 
     'scrollTop': $target.offset().top - offset 
    }, 1500, function(){ 
     window.location.hash = target; 
    }); 

}); 

});