我在使用 JQuery 时遇到问题。
问题是我想要一个 (div) header 的高度作为 div 的 margin-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/