2

我是 jquery 的新手。

我想创建一个固定的底部横幅，当我向下滚动时.. 该横幅将停在我想要的选定 div 的末尾（在这种情况下，在“container-content-top”和“container-content-bottom”之间平滑过渡（不像我那样跳跃）。

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

有人有更好的解决方案吗？
在伙计们之前谢谢:)

4

2 回答 2

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();
于 2013-10-09T19:10:56.253 回答
0

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

希望这对需要的人有所帮助:)

于 2013-10-14T04:39:04.883 回答