使用JS替换固定位置答案

【问题标题】：Substitution for fixed position using JS使用JS替换固定位置
【发布时间】：2014-07-10 03:54:36
【问题描述】：

我想在我的网站上有一个浮动导航栏（与您一起向下滚动并停留在窗口顶部的导航栏）。

问题是，它适用于移动设备，当我使用固定位置时，我遇到了一些 android 版本（例如 4.3）的问题，并且我的导航栏不会达到 100% 宽度，它的左侧总是有一个小间距（似乎是 95% 的宽度向右浮动）。

这是我的导航栏 CSS：

#navBar
{
    position: fixed;
    top: 0px;
    width: 100%;
    height: 75px;
    background-color: #ffffff;
    box-shadow: 0px 0px 6px #666666;
    z-index: 1;
}

我也在我的 HTML 文件中使用它：

<meta name="viewport" content="width=100%; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;" />

我也试过了

var documentWidth = $(window).innerWidth();
$('#navBar').width(documentWidth);

有没有办法用 JS 来解决这个问题，但不使用位置固定？或任何其他建议？

【问题讨论】：

标签： android jquery css fixed navbar

【解决方案1】：

尝试将您的 css 更新为：

#navBar
{
    position: fixed;
    top: 0px;
    left:0px;
    display:block;
    width: 100%;
    height: 75px;
    background-color: #ffffff;
    box-shadow: 0px 0px 6px #666666;
    z-index: 1;
}

如果它仍然不起作用，你的 jquery 选项是：

CSS：

#navBar
{
    position:absolute;
    top: 0px;
    left:0px;
    display:block;
    width: 100%;
    height: 75px;
    background-color: #ffffff;
    box-shadow: 0px 0px 6px #666666;
    z-index: 1;
}

jQuery:

$(window).scroll(function(){
    $('#navBar').css({'top':$(window).scrollTop(),'left':$(window).scrollLeft()});
});

小提琴：

http://jsfiddle.net/p44JW/

【讨论】：