javascript - Jquery根据两个div之间的视口(viewport)将位置固定为静态

Question

我是 jquery 的新手。

我想创建一个固定的底部横幅，当我向下滚动时......该横幅将停在我想要的选定 div 的末尾(在本例中为“container-content-top”和“container-content-底部”平滑过渡(不像我那样跳跃)。

我已经使用 jquery 创建了，

 <script>
$(document).ready(function(){
    var topOfrel = $("#banner1").offset().top;
    var topOffooter = $("#container-content-bottom").offset().top - $("#banner1").height() - $("#header-nav").height() - 120;
    $(window).scroll(function(){
        var y = $(window).scrollTop();
        if (topOffooter > y) {
            jQuery("#banner1").css("position", "fixed");

        } else {
            jQuery("#banner1").css("position", "static");
        }

    });
})
</script>

但在一定像素滚动后，横幅似乎会移动到我想要的位置(在 2 div 之间)。我已经为此工作了 3 天:(。我希望横幅不会固定并在我滚动和响应后变为静态到我想要的平滑过渡的位置。

这是我的完整代码:http://jsbin.com/IDonagi/1/edit?html,css,output

谁有更好的解决方案？
谢谢大家:)

Answer 1

您想在浏览器窗口的底部边框越过 #container-content-bottom 的顶部位置时触发切换。确定它们的正确代码是:

// topOffooter is the top offset of content after the banner.
// Have to add banner height here because its initial position is fixed,
// and therefore not counted when determining position of #container-content-bottom.
var topOffooter = $("#container-content-bottom").offset().top + $("#banner1").outerHeight();

...

// y is top offset of current bottom border of browser window
var y = $(window).scrollTop() + $(window).height();