gpt4 book ai didi

javascript - JQuery 有问题

转载 作者:行者123 更新时间:2023-11-30 09:36:18 26 4
gpt4 key购买 nike

我在使用 JQuery 时遇到问题。问题是我想要一个 (div) header 的高度作为 divmargin-top ,它的类是“内容”,否则,div 会出现在标题下方。

这里有代码:

部分 HTML

<head>
/*whatever it's inside*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<script>
$(document).ready(function(){
var 1 = $(".header").height() + "px");
$(".content").css ('margin-top', 1);
});
</script>
<body>

<div class="header">

<div class="container">
<div class="logo">
<h1><a href="#">Web</a></h1>
</div>

<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="container">

<div class="content">


<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
</p>
</div>
</div>
</body>
</html>

部分CSS

 body {
width: 100%;
margin: auto;
}

.container {
width: 70%;
margin: 0 auto;
}

.header {
background: #6396bc;
width: 100%;
top: 0;
position: fixed;
}
.content {
margin-top: 200px;
}

我只放有用的东西。

HTML 中有 JS。提前致谢。

最佳答案

变量不能是数字所以这里是固定代码..

 $(document).ready(function(){
var x = $(".header").height();
$(".content").css ('margin-top', x);
});
 body {
width: 100%;
margin: auto;
}

.container {
width: 70%;
margin: 0 auto;
}

.header {
background: #6396bc;
width: 100%;
top: 0;
position: fixed;
}
.content {
margin-top: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">

<div class="container">
<div class="logo">
<h1><a href="#">Web</a></h1>
</div>

<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="container">

<div class="content">


<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
</p>
</div>
</div>

关于javascript - JQuery 有问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43367265/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com