固定标题上的 Div
[英]Div over fixed header
问题描述
如何创建一个位于标题顶部的div ，但在向下滚动时会消失，而标题将保持在顶部。 这是它的外观：
3 个解决方案
解决方案1
1 已采纳 2017-02-09 10:28:34
请清楚地描述您的代码问题。 您的应用程序是否支持引导程序 ( https://getbootstrap.com/components/#navbar )？
你想要这样的东西吗？ 我有相同的屏幕截图。 http://plnkr.co/edit/gETDDsIiqZXpFa9YtmE5?p=preview
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:100px;">
<h1>Wallpaper</h1>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<div class="navbar-header">
<a class="navbar-brand" href="#">Header</a>
</div>
</nav>
<div class="container-fluid" style="height:1000px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum, quam vitae congue finibus, mi nulla accumsan tortor, sed lacinia quam purus non eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Donec sapien est, aliquam et est vitae, iaculis varius orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam sed augue augue. Fusce ac felis non risus cursus iaculis id quis justo. Praesent in velit
accumsan, tincidunt nisi non, finibus justo. Maecenas aliquam elit neque, et mollis erat accumsan at. Ut a mauris in erat accumsan facilisis.
</p>
<p>Aliquam fringilla semper elit ut convallis. Fusce bibendum ornare felis sit amet fermentum. Nunc quis auctor nibh. Proin viverra, sem vitae posuere semper, erat quam molestie leo, sit amet posuere mi nisl non nibh. Etiam auctor luctus diam ut interdum.
Duis erat velit, ultrices in nibh id, molestie lacinia metus. Suspendisse quam est, ultrices ac mi eu, auctor vulputate diam. Vestibulum consequat enim vitae fringilla dapibus.</p>
<p>Ut ut lobortis est, eu tempus justo. Morbi venenatis velit eget auctor fermentum. Ut auctor non mauris in tincidunt. Sed gravida mauris vel mattis aliquet. Vestibulum semper ipsum placerat, congue massa at, vehicula nibh. Pellentesque tincidunt, lorem
at luctus gravida, diam turpis iaculis mauris, nec venenatis lacus odio vitae elit. Integer ullamcorper sagittis ipsum, ac aliquet mauris tempus at. Nam imperdiet, orci vel tincidunt semper, purus nibh bibendum risus, ac pretium felis dui sed justo.
Nunc consectetur venenatis neque, sed sodales lacus egestas nec. Praesent convallis facilisis facilisis. Quisque eget dui faucibus, interdum dolor eu, imperdiet sem. Donec quis ante in dolor accumsan convallis. Donec vel justo ac mauris fermentum
vulputate. Curabitur vel nibh quis nisi fermentum hendrerit vitae in ipsum. Sed consectetur purus tristique ante vulputate ultrices.</p>
<p>Donec ut sapien nec massa cursus viverra ut at lectus. Pellentesque pellentesque, eros quis venenatis mollis, mi ligula aliquam arcu, sed hendrerit velit nulla efficitur massa. Phasellus laoreet risus nec dictum ultrices. Nam posuere porttitor condimentum.
Donec accumsan elit et tortor blandit, a tristique erat porttitor. In quis tincidunt arcu, id semper ex. Suspendisse rutrum sed neque eget dapibus. Pellentesque a urna non urna accumsan feugiat a sed metus. Donec consequat luctus ullamcorper.</p>
<p>Aenean viverra ipsum non lorem laoreet, id feugiat leo volutpat. Ut ex erat, cursus non ullamcorper sit amet, ullamcorper sed ante. Curabitur ultricies, magna ac accumsan dictum, odio felis mollis enim, et ultricies arcu justo vel nisi. Suspendisse
potenti. Vivamus elit turpis, scelerisque vitae elit vitae, aliquet viverra purus. Phasellus finibus, mauris vel facilisis interdum, ante nisl ullamcorper felis, feugiat hendrerit arcu mi a est. In ut metus a ligula ultrices tincidunt. Praesent
ullamcorper sem sapien, ac condimentum erat pellentesque a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum est et massa venenatis interdum. Quisque convallis finibus lectus vitae semper. Vivamus pharetra lacus sed nulla blandit,
sollicitudin semper velit auctor. Sed erat enim, aliquet at massa et, dignissim sodales lorem. Aliquam erat volutpat. Cras euismod ligula vitae sollicitudin posuere.</p>
</div>
</body>
</html>
解决方案2
0 2017-02-09 10:25:21
我花了几分钟的时间来解决这个问题，我认为我设法让我按照你想要的方式工作。 这个例子是建立在引导程序上的，但应该能够应用最多的东西。 提琴手
查询
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
CSS
nav.navbar{
top:30px;
background-color:#ccc;
// Animation
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
nav.navbar.shrink {
top:0px;
}
解决方案3
0 2017-02-10 09:01:12
如果您需要，这是完整的代码，只是
<!DOCTYPE html>
<html>
<head>
<script>
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<style>
nav.navbar{
top:50px;
background-color:#ccc;
// Animation
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
nav.navbar.shrink {
top:0px;
}
</style>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<title></title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<strong>Navigation bar</strong>
</div>
</nav><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
具有固定标题的div表
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.