我今天找到了这个网站http://www.mcdonalds.de/。有谁知道如何制作像这样的粘性标题?只有徽标向下滚动导航隐藏和徽标悬停显示导航。 如果有任何可以帮助我编码或任何资源,帮助我创建相同的。你的回复对我很有帮助。
答案 0 :(得分:0)
当然你可以自己创造它。但我认为你想要一个快速简便的解决方案。
这就是我建议使用它的原因: http://janpaepke.github.io/ScrollMagic/
如果你想自己创建它,我建议至少使用jQuery。阅读这些主题:
你要做的是: 创建两个类 其中一个看起来像“大酒吧”,一个像“小酒吧” 触发滚动事件会执行类更改(切换)。你必须通过transition或jQuery .animate来设置它的动画。您可以通过“.offset”方法获取元素是否位于顶部(offset = 0)。
我为你创造了一个例子。您必须使用滚动事件替换按钮单击事件。您还必须检查偏移量具有的值。如果它位于顶部,则使用“big”类,否则使用“small”。
您必须在标题的CSS(#header)中添加“position:fixed”。然后将div“粘合”到窗口的顶部。您将实现此效果,其余内容滚动在标题栏后面。
function scrollybolly(){
var header = document.getElementById("header");
if(header.className == "big"){
header.className = "small";
}else{
header.className = "big";
}
}
.big{
width: 200px;
height: 40px;
border: solid black 1px;
}
.small{
width: 50px;
height: 40px;
border: solid black 1px;
}
#header{
-webkit-transition: width 2s ease;
-moz-transition: width 2s ease;
-ms-transition: width 2s ease;
-o-transition: width 2s ease;
transition: width 2s ease;
}
<div id="header" class="big"></div>
<Button onClick="scrollybolly()">Click here to simulate a scroll event</Button>
我用过的东西:
答案 1 :(得分:0)
这只是一个荒谬的实现,但我想你可能会有这个想法。
$(window).scroll(function() {
var $container = $(".container");
var container_offset = $container.offset().top - $(window).scrollTop();
console.log(container_offset);
if(container_offset){
$container.addClass('fixed');
}else{
$container.removeClass('fixed');
}
});
&#13;
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
background-color: #bdc3c7;
padding:0;
margin:0;
}
.header {
background-color: #3498db;
float: left;
width: 100%;
height: 70px;
transition: width .3s;
}
.container.fixed .header {
width: 100px;
max-width: 900px;
position: fixed;
top: 20px;
}
.container.fixed .header ul {
display: none;
}
.container.fixed .main {
margin-top: 70px;
}
h1 {
float: left;
}
ul {
float: left;
}
ul li {
display: inline-block;
}
.container {
margin: 0 auto;
width: 100%;
padding: 20px;
background-color: #34495e;
float: left;
}
.main {
min-height: 1000px;
color: #fff;
float: left;
line-height: 1.4em;
}
p {
margin-bottom: 20px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<header class="header">
<h1>logo</h1>
<ul>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
</ul>
</header>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>
</div>
</div>
&#13;