如何制作一个导航栏(大雾)

2294天前 · 代码 · 4848次阅读

唔..家里断网了写点字打发打发时间( º﹃º )


如何制作一个顶部导航菜单?

先放个html

    <div id=“nav”>噼里啪啦</div>

再加一点点css

#nav {
   position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
}

结束了

...

貌似太草率了,那么再加点东西,在页面向下滚动时就消失,在向上滚动时显示出来。

首先要把向上滚和向下滚的css写出来,就像这样子

.slideUp {
  -webkit-transform: translateY(-100px);
  transform: translateY(-100px);
  transition: transform .5s ease-out;
}

.slideDown {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  transition: transform .5s ease-out;
}    

于是再加个js

var new_scroll_position = 0;
var last_scroll_position;
var header = document.getElementById("nav");
 
window.addEventListener('scroll', function(e) {
last_scroll_position = window.scrollY;
 
// 向下滚动
if (new_scroll_position < last_scroll_position && last_scroll_position > 80) {
  header.classList.remove("slideDown");
  header.classList.add("slideUp");
 
// 向上滚动
} else if (new_scroll_position > last_scroll_position) {
  header.classList.remove("slideUp");
  header.classList.add("slideDown");
}
 
new_scroll_position = last_scroll_position;
});   

于是就可以愉快地使用啦

话说用手机写真的好费劲哦இдஇ

本文参考htmleaf

👍 0

css html js

最后修改于1303天前

评论

取消回复
贴吧 狗头 原神 小黄脸
收起

贴吧

  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡

狗头

  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头

原神

  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神

小黄脸

  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  1. 菜鸟 1465天前

    damuzhi 学习了

  2. 小彦 1843天前

    hi,博主你有兴趣加入『个站商店』吗?是一个精致的个人网站展示平台,上面有300个站长加入了哦!邀请你加入~~
    http://storeweb.cn

    1. 季悠然 1840天前

      其实早就加入了滑稽

  3. Parkmimi 2244天前

    哇 正需要呢 感谢啦

  4. Tanker 2283天前

    css3足够了,不用js

  5. 冯小贤 2284天前

    emmmmmmmmmmmmmmm

    1. 季悠然 2280天前

      超慌இдஇ

  6. Weic 2293天前

    emmm…………

    1. 季悠然 2280天前

      慌(´゚д゚`)

  7. 狂放 2293天前

    赶快收藏,下个星期就能拿到我神奇的电脑了,我还欠大佬一个单页没写呢。(某神奇大佬竟然让我这个励志成为后端的萌新来写前端,我根本不懂JavaScript啊)

  8. 某昴 2294天前

    学到了(•̀ᴗ•́)

目录

avatar

季悠然

寻找有趣的灵魂

139

文章数

2069

评论数

3

分类

好热啊

arknights!

如果有一个喜欢你的人出现,一定不要凶她哦!

瑶瑶

1484