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>

但似乎横幅将在某些px滚动后移动到我想要的位置（在2 div之间）。我已经在这3天了:(。我希望横幅不会固定，并且在我滚动和响应后也可以平滑过渡到我想要的位置。

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

谁有更好的解决方案？
Thx之前的人:)）

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

感谢Leo，这是我解决这个问题的方法，

<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" />

希望在需要时帮助某人：）

Jquery基于两个div之间的视口将位置固定为静态

2 个答案: