Question

我想在我的网站上放置一个浮动导航栏（随你滚动并停留在窗口的顶部）。

事情是，它用于移动，当我使用固定位置我有几个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()});
});

小提琴：

http://jsfiddle.net/p44JW/

使用JS替换固定位置

1 个答案: