滾動後重新定位DIV

我有一個滾動後重新定位的導航欄。它適用於position：fixed，但在滾動時，我希望它像網站上的所有其他內容一樣向上移動。我的用戶停止滾動應該重新定位在最前面：滾動後重新定位DIV

繼承人演示：

但我希望它是位置：絕對（尤其是在iPad上滾動） http://jsfiddle.net/gvjeyywa/5/

我如何讓JS覆蓋我的CSS？這裏是我的JS：

var isInAction = false; 
    var lastScrollTop = 0; 
    $(window).scroll(function(event){ 
    var st = $(this).scrollTop(); 
    if (st > lastScrollTop){ 
    if (!isInAction){ 
     isInAction = true; 
     $("#navigation").animate({ 
      top: "-" + $("#navigation").innerHeight() + "px" 
     }).delay(1000).animate({ 
      top: "0px" 
     }, 800, function() { 
      isInAction = false; 
      }); 
     } 
     } 
    lastScrollTop = st; 
});

來源

2014-08-31 Cyrill

@Moshtaf這是我的新問題 – Cyrill 2014-08-31 12:33:36

@ Moshtaf 基本上它是這樣的：我在上面一個div：0像素帶位置：絕對...該用戶滾動，所以它消失。但在短暫的延遲後，它從頂部滑到頂部：0px ...如果用戶進一步/再次滾動，相同的效果... – Cyrill 2014-08-31 12:47:12

在第一次看，我認爲這是不可能的，但一些嘗試此代碼後創建。
我花了很長時間編寫這段代碼，並使用了多種技術，希望對您有所幫助。也許有更簡單的解決方案！

var bitFlag = false; 
var lastScrollTop = 0; 
var timeoutId; 
$navigation = $("#navigation"); 
$(window).scroll(function (event) { 
    var intWindowTop = $(window).scrollTop(); 
    var intElementBottom = $navigation.offset().top + $navigation.innerHeight(); 
    if (intWindowTop > lastScrollTop) { 
     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() { 
        $navigation.animate({ 
         top: intWindowTop + "px" 
        }, 800); 
       }, 500); 
      } 
     }, 100); 
    } else { 
     $navigation.css("position", "fixed").css("top", "0px"); 
     bitFlag = false; 

    } 
    lastScrollTop = intWindowTop; 
});

的}, 500);部控制延遲時間以毫秒爲單位和}, 800);部控制滑下動畫速度。

Check JSFiddle Demo

來源

2014-08-31 13:16:35 Moshtaf

它在JSFiddle中完美工作，但不知何故它不在我的網站上？ http://www.cyrill-kuhlmann.de/index.php/projects/ – Cyrill 2014-08-31 13:29:26

...對不起，我非常感謝您的幫助！但在我的網站上它告訴我「TypeError：'undefined'不是一個對象（評估'$ navigation.offset（）。top'）」，我只是不知道它的含義。在JS中，我只是一個起動器...... – Cyrill 2014-08-31 13:50:12

滾動後重新定位DIV

回答

相關問題