錯誤與JS

Question

我想建立一個菜單欄彈性滾動和菜單欄就像你看到她的jsfiddle：

http://jsfiddle.net/gvjeyywa/21/

有它的工作原理正是我想要它......但在途中網頁它有一個錯誤，我認爲這是因爲OSX的彈性滾動...在向下滾動菜單欄時，應從頂部滑入以設置頂部：0px，在那裏修復...但如果您滾動回頂部，彈性滾動卷軸高於身體...菜單跳得太高...

在這裏看到現場的例子： http://www.cyrill-kuhlmann.de/index.php/projects

在iOS上它是一個完整的混亂太...

這裏是JS代碼：

  var bitFlag = false; 
    var isActive = true; 
    var lastScrollTop = 0; 
    var timeoutId; 
    $navigation = $("#navigation"); 
    $(window).scroll(function (event) { 
     var intWindowTop = $(window).scrollTop(); 
     var intElementBottom = $navigation.offset().top + $navigation.height(); 
     if (intWindowTop > lastScrollTop) { 
      isActive = true; 
      if (!bitFlag) { 
       $navigation.css("position", "absolute").css("top", intWindowTop + "px"); 
       bitFlag = true; 
      } 
      if (timeoutId) { 
       clearTimeout(timeoutId); 
      } 
      timeoutId = setTimeout(function() { 
       if (intWindowTop > intElementBottom) { 
        intDelayTime = setTimeout(function() { 
         if (isActive) { 
          $navigation.animate({ top: intWindowTop + "px" }, { 
           duration: 800, 
           step: function() { 
            if ($(window).scrollTop() < $navigation.offset().top) { 
             $(this).stop(true,true); 
            } 
           }, 
           complete: function() { 
            intDelayTime2 = setTimeout(function() { 
             $("#navigation").css("position", "fixed").css("top", "0px"); 
             bitFlag = false; 
             isActive = false; 
            }, 1); 
           } 
          }); 
         } 
        }, 500); 
       } 
      }, 100); 
     } else { 
      $navigation.css("position", "fixed").css("top", "0px"); 
      bitFlag = false; 
      isActive = false; 
     } 
     lastScrollTop = intWindowTop; 
    }); 

這是CSS：

#navigation { 
    position:absolute; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    height: 80px; 
    background-color: #FFF; 
    z-index:999; 
    padding-top: 25px; 
    padding-left: 45px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    } 

是否有人有想法？不幸的是，我是一個在JS的血腥起動器...我很感謝任何幫助...

Answer 1

問題是這樣的：intWindowTop > lastScrollTop。 當您滾動到webkit附帶的負面區域時，此值爲true。

，所以你必須檢查，如果該值通過intWindowTop > 0

$(window).scroll(function() { 
    var intWindowTop = $(window).scrollTop(); 
    var intElementBottom = $navigation.offset().top + $navigation.height(); 
    if (intWindowTop > lastScrollTop && intWindowTop > 0) { 
     //... 
    } else { 
     //... 
    } 

注意，我刪除了變量「事件」，以及爲正。你不使用它，所以爲什麼要聲明它..？