Question

有底栏，有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函数，以防止元素сoverbottom bar：

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

修改

Yeath，我明白了，在改变doc高度时出现了窗口滚动面板。任何解决方案？

Answer 1

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

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

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

JS函数导致页面上所有元素的移位

1 个答案: