android - 使用JS替换固定位置

Question

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

问题是，它适用于移动设备，当我使用固定位置时，我遇到了几个 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 解决这个问题，但不使用位置固定？或任何其他建议？

Answer 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()});
});

fiddle :

http://jsfiddle.net/p44JW/