本文介绍了导航栏向下滚动消失,向上滚动重新出现带幻灯片的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在寻找像 devmounta.in 这样的导航栏.我有一个基本的工作,但它没有 DevMountain 的漂亮的滑动动画.我希望为我的网站添加漂亮的滑动动画.

HTML:

 <nav class="navbar navbar-inverse navbar-fixed-top"><div class="container-fluid"><!-- 标志 --><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a href="#" class="navbar-brand">RoadAware</a>

<!-- 菜单项--><div class="collapse navbar-collapse" id="mainNavBar"><ul class="nav navbar-nav navbar-right"><li><a href="#">首页</a></li><li><a href="#">关于</a></li><li><a href="#">联系方式</a></li><li><a href="#">联系方式</a></li>

</nav></标题>

JS:

$(window).scroll({上一个顶部:0},功能 () {var currentTop = $(window).scrollTop();如果 (currentTop < this.previousTop) {$("header").show();} 别的 {$("header").hide();}this.previousTop = currentTop;});
解决方案

您引用的站点使用了一个名为 Headroom.js.请参阅工作示例.

//HeadroomJSvar myElement = document.querySelector("header");var headroom = new Headroom(myElement);headroom.init();
body,html {边距顶部:65px;}标题 .container {位置:相对;最大宽度:1000px;边距:0 自动;box-sizing: 边框框;背景色:#fff;填充左:0;填充顶部:25px;填充底部:5px}.净空{位置:固定;顶部:0;左:0;右:0;过渡:所有 .2s 缓入缓出;-webkit-user-select:无;-moz-user-select:无;-ms-user-select:无;用户选择:无}.headroom--固定{顶部:0}.headroom--取消固定{顶部:-40%}.未找到 {字体系列:proxima-nova;填充顶部:100px;最小宽度:100%;最小高度:100%;背景:rgba(0, 0, 0, .5)}.notfound h1 {保证金最高:8%;显示:块;文本对齐:居中;字体粗细:700;颜色:#ff}.notfound h5 {显示:块;文本对齐:居中;字体粗细:100;颜色:#ff}.notfound 跨度{显示:块;文本对齐:居中;字体大小:700%;颜色:#00aeef;字体粗细:700;大纲:#fff 1px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.7.0/headroom.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/><身体><header class="headroom"><nav class="navbar navbar-inverse"><div class="container-fluid"><!-- 标志 --><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a href="#" class="navbar-brand">RoadAware</a>

<!-- 菜单项--><div class="collapse navbar-collapse" id="mainNavBar"><ul class="nav navbar-nav navbar-right"><li><a href="#">首页</a><li><a href="#">关于</a><li><a href="#">联系方式</a><li><a href="#">联系方式</a>

</nav></标题><div class="container">Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来,Lorem Ipsum 一直是行业标准的虚拟文本,当时一位不知名的印刷商使用了一个类型的厨房,并争先恐后地制作了一本类型样本书.它不仅存活了五个世纪,而且还经历了电子排版的飞跃,基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行,最近又在桌面像 Aldus PageMaker 这样的出版软件,包括 Lorem Ipsum 的版本.Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来,Lorem Ipsum 一直是行业标准的虚拟文本,当时未知的打印机拿了一个类型的厨房,把它弄成一本类型的样本书.它不仅存活了五个世纪,而且还经历了电子排版的飞跃,基本保持不变.它在 1960 年代随着 Letraset 的发布而普及包含 Lorem Ipsum 段落的纸张,以及最近的桌面出版软件,如 Aldus PageMaker,包括 Lorem Ipsum 的版本.Lorem Ipsum 只是印刷和排版行业的虚拟文本.Lorem Ipsum 一直是业界的自 1500 年代以来的标准虚拟文本,当时一位不知名的印刷商使用了一个类型的厨房并将其混为一谈制作了一本类型样本书.它不仅存活了五个世纪,而且还经历了电子排版的飞跃,基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行,最近随着桌面出版软件 Aldus PageMaker 包括 Lorem Ipsum 的版本而流行.Lorem Ipsum 只是印刷和排版行业.自 1500 年代以来,Lorem Ipsum 一直是行业标准的虚拟文本,当时一位不知名的印刷商使用了一个类型的厨房,并争先恐后地制作了一本类型样本书.它不仅存活了五个世纪,还有电子排版的飞跃,基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行,最近又随着像 Aldus PageMaker 这样的桌面出版软件包括 Lorem Ipsum 的版本.Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来,Lorem Ipsum 一直是业界标准的虚拟文本,当时一位不知名的打印机使用了一个类型的厨房并打乱它可以制作一个类型的样本书.它不仅存活了五个世纪,而且还经历了电子排版的飞跃,基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而普及,最近还有像 Aldus PageMaker 这样的桌面出版软件,包括 Lorem Ipsum 的版本.Lorem Ipsum 只是印刷和排版行业的虚拟文本.从那以后,Lorem Ipsum 一直是业界标准的虚拟文本1500 年代,当时一位不知名的印刷商拿了一个类型的厨房,并争先恐后地制作了一本类型样本书.它不仅存活了五个世纪,而且还经历了电子排版的飞跃,基本保持不变.它流行于1960 年代,随着包含 Lorem Ipsum 段落的 Letraset 表的发布,以及最近的桌面出版软件,如 Aldus PageMaker,包括 Lorem Ipsum 的版本.Lorem Ipsum 只是印刷和排版的虚拟文本行业.自 1500 年代以来,Lorem Ipsum 一直是行业标准的虚拟文本,当时一位不知名的印刷商使用了一个类型的厨房,并争先恐后地制作了一本类型样本书.它不仅存活了五个世纪,而且还跨越了电子排版,基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表格的发布而流行,最近随着桌面出版软件 Aldus PageMaker 包括 Lorem 版本的发布Ipsum.Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来,Lorem Ipsum 一直是行业标准的虚拟文本,当时一位不知名的印刷商使用了一个类型的厨房,并争先恐后地制作了一本类型样本书.它不仅存活了五个世纪,而且还经历了电子排版的飞跃,基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行,最近又在桌面像 Aldus PageMaker 这样的出版软件,包括 Lorem Ipsum 的版本.Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来,Lorem Ipsum 一直是行业标准的虚拟文本,当时未知的打印机拿了一个类型的厨房,把它弄成一本类型的样本书.它不仅存活了五个世纪,而且还经历了电子排版的飞跃,基本保持不变.它在 1960 年代随着 Letraset 的发布而普及包含 Lorem Ipsum 段落的纸张,以及最近的桌面出版软件,如 Aldus PageMaker,包括 Lorem Ipsum 的版本.Lorem Ipsum 只是印刷和排版行业的虚拟文本.Lorem Ipsum 一直是业界的自 1500 年代以来的标准虚拟文本,当时一位不知名的印刷商使用了一个类型的厨房并将其混为一谈制作了一本类型样本书.它不仅存活了五个世纪,而且还经历了电子排版的飞跃,基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行,最近随着桌面出版软件 Aldus PageMaker 包括 Lorem Ipsum 的版本而流行.

I'm looking to make a navigation bar like devmounta.in. I have a basic one working but it doesn't have the nice sliding animation that DevMountain's has. I'm looking to add the nice sliding animation to my site.

HTML:

    <header>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <!-- Logo -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">RoadAware</a>
            </div>
            <!-- Menu Items -->
            <div class="collapse navbar-collapse" id="mainNavBar">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>

JS:

$(window).scroll(
{
    previousTop: 0
},
function () {
var currentTop = $(window).scrollTop();
if (currentTop < this.previousTop) {
    $("header").show();
} else {
    $("header").hide();
}
this.previousTop = currentTop;
});
解决方案

The site you referenced uses a plugin called Headroom.js. See working example.

//HeadroomJS
var myElement = document.querySelector("header");
var headroom = new Headroom(myElement);
headroom.init();
body,
html {
  margin-top: 65px;
}
header .container {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #fff;
  padding-left: 0;
  padding-top: 25px;
  padding-bottom: 5px
}
.headroom {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: all .2s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}
.headroom--pinned {
  top: 0
}
.headroom--unpinned {
  top: -40%
}
.notfound {
  font-family: proxima-nova;
  padding-top: 100px;
  min-width: 100%;
  min-height: 100%;
  background: rgba(0, 0, 0, .5)
}
.notfound h1 {
  margin-top: 8%;
  display: block;
  text-align: center;
  font-weight: 700;
  color: #fff
}
.notfound h5 {
  display: block;
  text-align: center;
  font-weight: 100;
  color: #fff
}
.notfound span {
  display: block;
  text-align: center;
  font-size: 700%;
  color: #00aeef;
  font-weight: 700;
  outline: #fff 1px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.7.0/headroom.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <header class="headroom">
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <!-- Logo -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar"> <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>

          </button> <a href="#" class="navbar-brand">RoadAware</a>

        </div>
        <!-- Menu Items -->
        <div class="collapse navbar-collapse" id="mainNavBar">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Home</a>

            </li>
            <li><a href="#">About</a>

            </li>
            <li><a href="#">Contact</a>

            </li>
            <li><a href="#">Contact</a>

            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <div class="container">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the
    printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
    but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
    including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
    it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
    the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in
    the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
    typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
    Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</body>

这篇关于导航栏向下滚动消失,向上滚动重新出现带幻灯片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-30 07:04