3

我是 Jquery 的新手。我想知道我们如何使用 margin: 0 auto; jquery 脚本中的 CSS 代码。有人可以帮我吗？这是代码：

<style>
#fixed-bar {
    padding: 0;
    background-color: black;
    z-index: 100;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>

<script>
$(function () {
  $("#fixed-bar")
    .css({
        "position": "fixed",
        "width": "960px",
        "margin": "0 auto",
        "top": "0px",

})
    .hide();
  $(window).scroll(function () {
    if ($(this).scrollTop() > 400) {
      $('#fixed-bar').fadeIn(200);
    } else {
      $('#fixed-bar').fadeOut(200);
    }
  });
});
</script>
<div id='fixed-bar'>
  Hello
</div>

其实我想居中的酒吧。我怎样才能做到这一点？

4

4 回答 4

2

你设置的一切都是正确的。但是您不能margin: auto将具有以下内容的元素居中position: fixed：

居中位置：固定元素

你也可以用 jQuery 做到这一点：

使用 jQuery 使 DIV 在屏幕上居中

于 2012-04-25T14:43:47.740 回答
1

您不能在 jQuery 中使用速记 CSS，您必须分别设置每个边距。

css({
    "marginTop": "0",
    "marginRight": "auto",
    "marginBottom": "0",
    "marginLeft": "auto"
})
于 2012-04-25T14:47:02.100 回答
-1

你可以试试这个：

HTML：

<div id="fixed-bar">
    <p>Test</p>
</div>

CSS： 

body {
    position : relative;
}

#fixed-bar {
    padding: 0;
    background-color: black;
    z-index: 100;
    width: 960px;
}

JavaScript：

$("#fixed-bar").css({
                "position" : "absolute",
                "left" : (($(window).width() - $("#fixed-bar").outerWidth()) / 2) + $(window).scrollLeft() + "px" })
               .hide();

$(window).scroll(function () {
    if ($(this).scrollTop() > 400) {
        $('#fixed-bar').fadeIn(200);
    } else {
        $('#fixed-bar').fadeOut(200);
    }
});

这样，无论屏幕大小如何，您的元素都将水平居中。不要忘记在您的 HTML 中包含 jQuery。

于 2012-04-25T14:54:51.423 回答
-2

有更好的方法使用 jQuery 将 div 居中，例如将其设置为绝对位置并找到其宽度、视口宽度以及根据这些数字设置偏移量：

$('.mydiv').css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
于 2012-04-25T14:44:59.823 回答