滚动后重新定位DIV
Reposition DIV after scrolling
我有一个导航栏,可以在向下滚动后重新定位。它适用于位置:固定,但在滚动时,我希望它像网站上的所有其他内容一样向上移动。如果用户停止滚动,它应该重新定位在顶部:
这里有一个演示:
http://jsfiddle.net/gvjeyywa/7/
但我希望它是位置:绝对的(尤其是在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;
});
第一次看时,我认为这是不可能的,但经过一些尝试,这段代码就创建了。
我花了很长时间写这段代码,并使用了一些技术,希望能有所帮助。也许还有更简单的解决方案!!
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);
部分控制向下滑动动画的速度。
检查JSFiddle演示
相关文章:
- 绝对定位不适用于Javascript DIV
- 如何相对于浏览器窗口定位DIV
- DIV不会与实验性CSS3菜单一起定位
- jQuery - 在另一个 DIV 中定位特定的 DIV
- 在 DIV 中定位表格单元格
- DIV-Elemt 绝对(!) 定位
- 在resizable()之后定位DIV
- 按百分比定位 Div 元素
- 在 IE8 中将 DIV 定位在图像上方
- 定位 AJAX 会通过使用“rel”属性生成正确的 DIV
- 使用 jQuery offset() 将绝对定位的 DIV 设置为另一个 DIV 的相同 y 坐标
- 定位JS动画DIV
- Javascript随机定位Div's而不重叠
- Safari:绝对定位的DIV在通过DOM更新时不会移动
- 定位Div内容,使其不会被截屏
- 滚动后重新定位DIV
- 定位Div "Fixed"垂直和绝对;水平位置:相对位置;容器Div
- 在java脚本中动态分配和定位DIV'S
- 如何在特定坐标中定位DIV
- 在特定文本上动态定位DIV