静态到固定菜单栏答案

【问题标题】：Static to fixed menu bar静态到固定菜单栏
【发布时间】：2016-04-13 10:26:27
【问题描述】：

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

我对如何创建一个看起来像这样的菜单栏进行了一些研究

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

有人可以帮我吗？

【问题讨论】：

如果您向我们提供您当前的代码，或者展示您已经尝试过的内容和无效的内容，而不是简单地寻求帮助，我很乐意为您指出正确的方向，并针对您的特定情况提供一些帮助。看看stackoverflow.com/help/how-to-ask
stackoverflow.com/questions/20630848/… 这是同一个问题
抱歉，第一次发帖 :) 我现在设法获得了一个粘性导航栏 :)

标签： html css menu fixed

【解决方案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

【讨论】：

设法做到这一点

【解决方案2】：

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

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

【讨论】：

不要忘记在页眉的高度上添加过渡
这里需要注意的是代码是用jQuery编写的；您将需要 jQuery 库才能使其工作。