静态到固定菜单栏

Question

我正在为一个学校项目开发网站。我有一个浮动在屏幕顶部的菜单栏，但我想让东西看起来好看和花哨。

我做了一些关于如何创建一个看起来像的菜单栏的研究

https://nl.malwarebytes.org/mwb-download/

有人能帮我吗？

Answer 1

需要注意的是，示例站点上的标头不会从"静态"位置转换为"固定"位置。它始终处于"固定"位置。

要重新创建所提供链接的效果，您需要在选择转换的内容、转换类型以及更改的属性时有所了解。

实现这一点的一种方法是使用jQuery在用户滚动超过窗口顶部时创建一个条件。

例如：

HTML:

<div class="menu">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>
<div class="content">
    <!--Site content-->
</div>

CSS：

.menu{
  position:fixed;
  width:100%;
  height:100px;
  background-color:transparent;
  -webkit-transition:  all 200ms ease;
  transition: all 200ms ease;
}
.content{
  padding:100px 60px 60px 60px; /*accomodates the fixed position header space*/
  -webkit-transition:  all 200ms ease;
  transition: all 200ms ease;
}
/* Styles for the menu after scrollTop >= 1 */
.menu.scrolled{
  height:60px;
  background-color:black;
  color:white;
}
.menu.scrolled + .content{
  padding-top:60px;
}

JS:

$(function() {
  $(window).scroll(function() {
    var scrolled = $(window).scrollTop();
    if (scrolled >= 1) {
      $('.menu').addClass("scrolled");
    } else {
      $('.menu').removeClass("scrolled");
    }
  });
});

一个包含更多样式CSS和额外CSS转换的版本可以在这里看到：http://codepen.io/eoghanTadhg/pen/PNRNOv

Answer 2

$(window).on('scroll', function(event) {
    if($(this).scrollTop()>50 && $(this).innerWidth()>480) {
        $('header').addClass('sticky');
    }
    else {
        $('header').removeClass('sticky');
    }
});

在java脚本中使用它，然后只为.stick类设置导航样式