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

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

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

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

有人可以帮我吗?

【问题讨论】:

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

标签: 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 库才能使其工作。
猜你喜欢
  • 1970-01-01
  • 2014-03-03
  • 1970-01-01
  • 2013-08-28
  • 2018-12-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-04-14
相关资源
最近更新 更多