我正在使用以下内容将div修复到页面的顶部,当页面滚动时,我想在它到达顶部之前将其停止60px。
此刻它一直走到顶端,然后跳回60px,这是凌乱的!
function moveScroller() {
var move = function() {
var st = $(window).scrollTop();
var ot = $("#scroller-anchor").offset().top;
var s = $("#scroller");
if(st > ot) {
s.css({
position: "fixed",
top: "60px"
});
} else {
if(st <= ot) {
s.css({
position: "relative",
top: ""
});
}
}
};
$(window).scroll(move);
move();
}
$(function() {
moveScroller();
});
这是一个小提琴:JSFiddle
可以这样做吗?
答案 0 :(得分:2)
当您将元素位置更改为“固定”时,我调整了条件。对我来说现在有效:
$(document).ready(function() {
function moveScroller() {
var move = function() {
var st = $(window).scrollTop();
var ot = $("#scroller-anchor").offset().top;
var s = $("#scroller");
var marginTop = 60;
if((st+marginTop) > ot) {
s.css({
position: "fixed",
top: marginTop + "px"
});
} else {
if(st <= ot) {
s.css({
position: "relative",
top: ""
});
}
}
};
$(window).scroll(move);
move();
}
$(function() {
moveScroller();
});
});
答案 1 :(得分:0)
希望这可以满足您的要求。
function moveScroller() {
var st = $(window).scrollTop();
var ot = $("#scroller-anchor").offset().top;
var s = $("#scroller");
if (st > ot) {
s.css({
position : "fixed",
top : "60px"
});
} else {
if (st <= ot) {
s.css({
position : "relative",
top : ""
});
}
}
}
$(window).scroll(moveScroller);
$(function() {
moveScroller();
});
答案 2 :(得分:0)
朋友抱歉我没有看到确切的,但这可能会解决你的目的:)。
function moveScroller() {
var st = $(window).scrollTop();
var ot = $("#scroller-anchor").offset().top;
var s = $("#scroller");
if (st >= 200) {
s.css({
position : "fixed",
top : "60px"
});
} else {
if (st <= ot) {
s.css({
position : "relative",
top : ""
});
}
}
}
$(window).scroll(moveScroller);
$(function() {
moveScroller();
});