Javascript 显示一个粘滞条，直到用户向下滚动到<；部门>；

我想在我的页面底部添加一个粘滞条，当用户通过滚动到达一个div时，粘滞条会淡出，当用户向上滚动并且该div不再出现在屏幕上时，粘滞条会再次淡入

而且它不应该显示用户屏幕是否足够大以正常显示div

请大家帮帮我

我目前正在使用此代码：-

   <script type="text/javascript">
//<![CDATA[
$(window).bind("scroll", function() {
    if ($(this).scrollTop() > -1) { //Fade in at a level of height
        $("#bottbar").fadeIn();
        checkOffset();
    } else {
        $("#bottbar").stop().fadeOut();
    }
});
function checkOffset() {
    if($('#bottbar').offset().top + $('#bottbar').height() >= $('#stopDiv').offset().top) {
        $('#bottbar').css('position', 'absolute');
    }
    if($(window).scrollTop() + $(window).height() < $('#stopDiv').offset().top) {
        $('#bottbar').css('position', 'fixed'); // restore when you scroll up
   }
}
//]]>
</script>

//-1）{//在高度级别淡入
$（“#botbar”）.fadeIn（）；
checkOffset（）；
}否则{
$（“#botbar”）.stop（）.fadeOut（）；
}
});
函数checkOffset（）{
如果（$（'#botbar'）.offset（）.top+$（'#botbar'）.height（）>=$（'#stopDiv'）.offset（）.top）{
$（'botbar'）.css（'position'，'absolute'）；
}
如果（$（窗口）.scrollTop（）+$（窗口）.height（）<$（'#stopDiv'）.offset（）.top）{
$（'#botbar'）.css（'position'，'fixed'）；//向上滚动时恢复
}
}
//]]>

但在我的网站bookaire.com上，它并没有像预期的那样工作

---

我不确定这段代码有什么问题，它在加载站点时不显示条，它只在用户滚动一点时显示，当它到达

stopdiv

而不是隐藏条时，它会卡在屏幕中央。

呼！这花了我一段时间，因为我仍然是javascript的初学者，但我想我明白了。 注意：由于在JavaScript中只将位置从固定位置更改为绝对位置，所以在某些屏幕大小上，卡会被卡在中间。相反，请将显示从“块”更改为“隐藏”。
还请注意，

#bottbar

的css应该已经是

display:block

我相信您的要求是：
1.它不应该显示用户屏幕是否足够大以正常显示该div
2.当用户通过滚动到达div时淡出

见：

$（文档）.ready（函数（）{
if（$（window）.height（）>$（'#stopDiv'）.offset（）.top）{
$（“#botbar”）.css（'display'，'none'）；
}
否则{
$（“#botbar”）.css（'display'，'block'）；
}
});
$（窗口）.bind（“滚动”，函数（）{
if（$（window）.height（）>$（'#stopDiv'）.offset（）.top）{
$（“#botbar”）.css（'display'，'none'）；
}
如果（$（this）.scrollTop（）>-1）{//在高度级别淡入
$（“#botbar”）.css（'display'，'block'）；
checkOffset（）；
} 
否则{
$（“#botbar”）.css（'display'，'none'）；
}
});
函数checkOffset（）{
如果（$（'#botbar'）.offset（）.top+$（'#botbar'）.height（）>=$（'#stopDiv'）.offset（）.top）{
$（'botbar'）.css（'display'，'none'）；
}
如果（$（窗口）.scrollTop（）+$（窗口）.height（）<$（'#stopDiv'）.offset（）.top）{
$（'#botbar'）.css（'display'，'block'）；//向上滚动时还原
}
}

您试过什么了吗？请显示您的代码和预期结果。@KyleSevenoaks添加了代码，请再次检查。您应该告诉我们当前代码的问题所在too@OGHazaThanx对于回复，我已经添加了您所说的细节，请检查它，它可以清楚地说明。@RiteshKumar，我不知道答案是什么，但是我投票决定重新开始，现在问题还没有解决，希望有人能帮上忙！！你太棒了，先生，你真的解决了我的问题，thanx很多。。。对我来说，你不是初学者，你是天才：）再次感谢。

$(document).ready(function() {
    if($(window).height() > $('#stopDiv').offset().top) {
        $("#bottbar").css('display', 'none'); 
    }
    else {
        $("#bottbar").css('display', 'block');
    }
});
$(window).bind("scroll", function() {
    if($(window).height() > $('#stopDiv').offset().top) {
        $("#bottbar").css('display', 'none');
    }
    if ($(this).scrollTop() > -1) { //Fade in at a level of height
        $("#bottbar").css('display', 'block');
        checkOffset();
    } 
    else {
        $("#bottbar").css('display', 'none');
    }
});
function checkOffset() {
    if($('#bottbar').offset().top + $('#bottbar').height() >= $('#stopDiv').offset().top) {
        $('#bottbar').css('display', 'none');
    }
    if($(window).scrollTop() + $(window).height() < $('#stopDiv').offset().top) {
        $('#bottbar').css('display', 'block'); // restore when you scroll up
   }
}