静态到固定菜单栏

Question

我正在为一个学校项目开发网站。我有一个浮动在屏幕顶部的菜单栏，但我希望它看起来漂亮而别致。

我研究了如何创建如下所示的菜单栏

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

有人可以帮助我吗？

Answer 1

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

在 java 脚本中使用它，然后为 .sticky 设置导航样式 class

Answer 2

重要的是要注意示例站点上的 header 不会从 'static' 转换到 'fixed' 位置。它始终位于 'fixed'.

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

实现此目的的一种方法是使用 jQuery 在用户滚动到超出 window 顶部时创建条件。

例如：

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

静态到固定菜单栏

Static to fixed menu bar

html

css

menu

fixed