Jquery在两个div之间基于viewport将位置固定为静态。

Question

我对jquery很陌生。

我想要创建一个固定的底部横幅，当我向下滚动..。该横幅将停止在选定的div的末尾，我想(在这种情况下，在“容器-内容-顶部”和“容器-内容-底部”之间的平稳过渡(不像我跳)。

我已经使用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>

但似乎横幅会移动到我想要的位置(在2div之间)，在某些px滚动之后。我已经为此做了三天了。我希望横幅不会固定，并改变为静态的立场，我希望与平稳过渡后，我滚动和响应太。

这是我的完整代码：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();

Answer 2

谢谢利奥，这是我解决这个问题的办法，

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

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

            });
        })
    </script>

对于准备好的移动设备，我只需将其添加到头部：

<meta name="viewport" content="user-scalable=no, width=device-width,initial-scale = 1.0,maximum-scale = 1.0" /> 

如有需要，希望这能帮助到某人:)