2013-05-07 88 views
2

我試圖創建一個粘滯的導航菜單,它將被定位在橫幅下方,當您向下滾動並且橫幅無法再被看到時,導航菜單將被固定在瀏覽器的頂部鉻。這是我到目前爲止有:http://tinyurl.com/bper44aScrolll後的固定導航菜單

的CSS是直線前進,該問題可能與我的JS:

$(document).ready(function() { 
    var s = $(".navMenu"); 
    var pos = s.position(); 
    $(window).scroll(function() { 
     var windowpos = $(window).scrollTop(); 
      if (windowpos >= pos.top) { 
       s.addClass("fixedTop"); } 
      else { 
       s.removeClass("fixedTop"); 
       } 
     }); 
    }); 

雖然它的工作原理完全相同的方式上希望它在Firefox中,我能找出原因它在Chrome和Safari中表現不同(只要向下滾動一下,就進入固定位置)。

任何見解?

回答

1

不知道爲什麼它工作在Firefox,但我認爲下面會爲所有的瀏覽器:

$(document).ready(function() { 
    var s = $(".navMenu"); 
    var banner = $("header > img"); 

    $(window).scroll(function() { 
     var windowpos = $(window).scrollTop(); 
      // if the scroll position is greater than the height of the banner 
      // fix the navigation. 
      if (windowpos >= banner.outerHeight()) { 
       s.addClass("fixedTop"); } 
      else { 
        s.removeClass("fixedTop"); 
       } 
      }); 
     }); 

強制性小提琴here

+0

這樣做!非常感謝 – 2013-05-07 23:48:00