Question

我正在尝试垂直和水平绝对修复标题。我使用以下代码。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="header_position.js" type="text/javascript"></script>
</head>

身体标签

$(window).scroll(function(event) {
$("#headerpos").css("margin-left", 0-$(document).scrollLeft());
});



#headerpos{
position:fixed;
border-top:8px solid #8DC540;
background:#1E415B;
width:956px;
padding-bottom:7px;
margin:auto;
z-index:100;
 }

我尝试在div中使用类attrb以及id attrb

.header{
position:fixed;
border-top:8px solid #8DC540;
background:#1E415B;
width:956px;
padding-bottom:7px;
margin:auto;
z-index:100;
 }

还尝试删除margin:auto;

我在链接Position a Div "Fixed" Vertically and "Absolute" Horizontally within a "Position:Relative" Container Div

中看到了这一切

但它不起作用，如果我去检查元素，我会看到一个错误：

未捕获参考错误：$未定义（在第1行）

请帮忙。这非常重要。

Answer 1

您需要在页面的头部包含jQuery，如下所示：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="header_position.js" type="text/javascript"></script>

另外，请务必将jQuery包装在文档就绪调用中：

$(document).ready(function () {
    $(window).scroll(function (event) {
        $("#headerpos").css("margin-left", 0 - $(document).scrollLeft());
    });
});

Answer 2

如果未定义$，则需要jQuery。只需加入

在另一个脚本之前

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>。

我还建议在页面底部放置两个script标记，以加快加载速度。

Answer 3

如果您在css中使用固定定位，则不需要js来水平对中div。试试这个。

.header{
   position:fixed;
   border-top:8px solid #8DC540;
   background:#1E415B;
   width:956px;
   padding-bottom:7px;
   margin-left:-478px;
   left:50%;
   z-index:100;
}

如何垂直固定位置和水平绝对固定

3 个答案: