粘性标题徽标悬停

Sticky Header Logo Hover

本文关键字：悬停 标题      更新时间：2023-09-26

我今天 http://www.mcdonalds.de/找到了这个网站。有谁知道如何制作这样的粘性标题？只有徽标向下滚动导航隐藏和徽标悬停显示导航。如果有的话，可以帮助我进行编码或任何帮助我创建相同的资源。你的回答对我有很大帮助。

这只是一个荒谬的实现，但我想你可能会明白这个想法。

$(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');
  }
});
@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;
}
<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>

当然，您可以自己创建它。但我认为你想要一个快速简便的解决方案。

这就是为什么我建议使用它：http://janpaepke.github.io/ScrollMagic/

如果你想自己创建它，我建议至少使用jQuery。阅读以下主题：

  • CSS3 转换
  • jQuery .animate
  • j查询滚动事件
  • CSS 定位（部分固定）
  • jQuery toggleClass
  • jQuery .offset

你要做的是：创建两个类其中一个看起来像"大酒吧"，一个看起来像"小酒吧"触发滚动事件将执行类更改（切换）。你必须通过transition或jQuery .animate对其进行动画处理。您可以通过".offset"方法获取元素是否位于顶部（偏移量 = 0）。

我为您创建了一个示例。您必须将按钮单击事件替换为滚动事件。您还必须检查偏移量具有哪个值。如果它在顶部，请使用类"大"，否则使用"小"。

您必须在标头（#header）的CSS中添加"位置：固定"。然后将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>

我用过什么：

  • http://www.w3schools.com/css/css3_transitions.asp
  • http://www.w3schools.com/tags/tag_button.asp
  • https://developer.mozilla.org/en-US/docs/Web/API/Element/className
  • https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
相关文章：