0

有底栏，带有CSS：

#bottom_nav {
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: solid 1px lightgray;
    background: url('http://localhost:3000/assets/font-try.jpg');
    height: 70px;
    width: 100%;
    font-family: "ProximaNova", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;}

在一些 AJAX 操作上有 Jquery 功能，以防止元素覆盖底栏：

var $beforeBar= $('#bottom_nav').prev().offset().top;
    var $beforeBarPosition=$beforeBar+  $('#bottom_nav').prev().height();
 if($beforeBarPosition+50>=$('#bottom_nav').offset().top){

        $('#bottom_nav').css({'top':$(document).height()+100});
    }

问题是每次调用此函数时，页面上的所有元素都会稍微向左移动。看起来真的很丑。如果我禁用功能，则不会移位。

另外，jsfiddle

编辑：

是的，我明白了，它在更改文档高度时出现了窗口滚动面板。有什么解决办法吗？

4

1 回答 1

0

这种转变是由这条线引起的：

$('#bottom_nav').css({'top':$(document).height()+100});

这将元素的顶部设置为#bottom_nav文档末尾之后的 100 像素...有效地将文档的高度增加了 170 像素（100 像素 + 的高度#bottom_nav）。下次运行此代码时，从返回的值$(document).height()高出 170... 导致页面的高度又扩大了 170 像素。

于 2013-06-06T05:21:30.597 回答