在滚动后重新定位DIV [英] Reposition DIV after scrolling

问题描述

我有一个导航栏，在向下滚动后重新定位。它工作与位置：固定，但滚动时，我想要像网站上所有其他内容一样向上移动。我用户停止滚动它应该重新定位在顶部：

I have a navigation bar that repositions after scrolling down. It works with position:fixed, but while scrolling I want it to move up like all the other content that follow on the site . I the user stops scrolling it should reposition on top:

演示：

http://jsfiddle.net/gvjeyywa/7/

但我想它的位置：绝对（特别是对于Ipad上的滚动）
http：// jsfiddle.net/gvjeyywa/5/

But I want it to be position:absolute (especially for the scrolling on the Ipad) http://jsfiddle.net/gvjeyywa/5/

如何让JS覆盖我的CSS？这是我的JS：

How do i let the JS overide my CSS? Here is my 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;
 });

推荐答案

尝试创建此代码。


我花了很长时间来写这段代码，并使用几种技术，希望有所帮助。
也许还有更简单的解决方案!!

In the first look i think it's impossible but after some tries this code was created.
I spent long time to write this code and use several techniques and hope to be helpful. Maybe there are simpler solutions too !!

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）; 部分控制滑动下滑动画的速度。

The }, 500); section control Delay time in milliseconds and the }, 800); section control the slide down animation speed.

检查JSFiddle演示

Check JSFiddle Demo

这篇关于在滚动后重新定位DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！