Javascript 为什么我的浮动div在滚动条上与页脚重叠，而不是停在页脚上？

我正在尝试创建一个浮动div，我希望它停在页脚。我在浮动div上添加了一个

边距顶部：50px

，但它超过了页脚。我需要的利润上限是50像素。我该如何解决这个问题

$（文档）.ready（函数（）{
变量长度=$（“#内容”）.height（）-$（“#滚动块”）.height（）+$（“#内容”）.offset（）.top；
$（窗口）。滚动（函数（）{
var scroll=$（this.scrollTop（）；
变量高度=$（“#滚动块”）.height（）+“px”；
如果（滚动<$（'#content'）.offset（）.top）{
$（'#滚动块'）.css({
'位置'：'绝对'，
“顶部”：“0”
});
}else if（滚动>长度）{
$（'#滚动块'）.css({
'位置'：'绝对'，
“底部”：“0”，
“顶部”：“自动”
});
}否则{
$（'#滚动块'）.css({
'位置'：'固定'，
“顶部”：“0”，
“高度”：高度
});
}
});
});
#标题{
背景：#c2c2；
高度：150像素；
}
#包装纸{
位置：相对位置；
最小高度：500px；/*仅作为示例*/
宽度：500px；
}
#内容{
位置：绝对位置；
背景#d7d7d7；
宽度：150px；
身高：100%；
}
#对{
位置：相对位置；
宽度：350px；
浮动：对；
高度：200px；
}
#滚动块{
背景#0096d7；
宽度：150px；
颜色：#fff；
高度：50px；
边缘顶部：50px；
}
.清楚{
明确：两者皆有；
}
#页脚{
背景：#c2c2；
高度：500px；/*仅作为示例*/
}

标题
这里有边栏文本！
这是正文的主要部分。
页脚
为什么“需要”浮动div上的
页边顶部：50px
？为什么希望浮动div上的
页边顶部
，以防止页脚重叠？@WesFoster我需要页边顶部50px，因为我有一个高度为50px的浮动页眉。如果我不在页边空白处加上50px，浮动div就会在页眉下。@TylerH如果你有更好的解决方案，请告诉我。请读我写给你的信WesFoster@WesFoster我不想让div也触顶。为什么“需要”浮动div上的
页边距顶部：50px
？为什么希望浮动div上的
页边距顶部
，以防止其与页脚重叠？@WesFoster我需要页边距顶部50px，因为我有一个50 px高的浮动页眉。如果我不在页边空白处加上50px，浮动div就会在页眉下。@TylerH如果你有更好的解决方案，请告诉我。请读我写给你的信WesFoster@WesFoster我不希望跳水也触顶