2

http://jsfiddle.net/rwr4X/2/

我制作了一个 jquery 脚本 - 它不是很好而且很笨重，但它可以工作一半......

var $buzz = $('#buzz'),
    viewportHeight = $(window).height(),
    buzzHeight = 182,
    buzzTop = $buzz.offset().top + buzzHeight,
    buzzPosition = buzzTop - viewportHeight;

$(window).bind("resize.browsersize", function () {

    var viewportHeight = $(window).height(),
        buzzTop = $buzz.offset().top + buzzHeight,
        buzzPosition = buzzTop - viewportHeight;

}).trigger("resize.browsersize");

$(window).scroll(function () {

    if ($(window).scrollTop() >= buzzPosition) {

        $buzz.css({
            position: 'fixed',
            bottom: 0
        });

    } else {

        $buzz.removeAttr("style");

    }

});

现在上面的脚本可以工作了，但仅限于初始 viewportHeight 变量。

基本上在我的真实项目中，我的页面上有 ajax 元素、字体和各种大小的动画。当浏览器视口大小发生变化时，我似乎无法更新变量，这会导致嗡嗡声跳跃。

请查看我对上述脚本的操作：http: //jsfiddle.net/rwr4X/2/

如果你向下滚动页面，你会看到buzz出现，当img的底部边缘到达viewport的底部时，位置切换到fixed。并且看起来是无缝的并且流动良好。

但是，如果您通过 ajax 等模拟我的页面变大 - 单击小提琴中的蓝色和绿色 div 以在每次单击时添加 50px。然后，如果您向上和向下滚动，您将看到到达滚动点时嗡嗡声会跳跃/跳过。这是因为我的 scrollTo 变量没有更新到视口的新大小。

任何人都可以帮我修复它，所以如果视口改变大小，嗡嗡声似乎总是无缝地粘在视口的底部。

提前致谢。


查看小提琴：http: //jsfiddle.net/rwr4X/2/

4

0 回答 0