JS实现导航栏下滑悬浮透明置顶

如果仅仅想把导航栏固定，添加以下属性即可：

style="position: sticky;"

注：前提是你已经写好了导航栏。

如果想将导航栏下滑悬浮透明，请参照如下方式：

给 header盒子(整个导航的盒子)添加 id="headerTop"

并添加以下css样式：

#headerTop{/*使导航栏固定在顶部*/position: fixed;   top:0;left: 0px;z-index: 1000;    /*一开始就不给导航栏设置背景色*/background-color: rgb(247, 247, 247);
}#headerTop.sticky{background-color: rgb(247, 247, 247, 0.9);border-bottom: 1px solid #e2e8f0;
}

重要：添加JS效果实现滑动检测：

<script>// 使顶部导航栏下滑显示，上滑透明// 添加滚动事件window.addEventListener('scroll', function() {//获取元素var header = document.querySelector("header"); //querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。// 添加类header.classList.toggle("sticky", window.scrollY > 0)});
</script>

如果实现不了，请自行查找搜索哈，差不多就是依据这些。

JS实现导航栏下滑悬浮透明置顶相关推荐

JQ实现标签栏切换效果、导航栏下滑效果以及动画队列和stop（）方法
标签栏切换 HTML <div class="box"><div class="tab-list"><ul><li&g ...
用js实现导航栏shoufang效果_【读者投稿】用Github+docsify，我花了半天就搭好了个人博客...
前言 "作为一个真正的码农,不能没有自己的个人博客",这是我说的.惭愧的是,入行两年多了都没搞起来,这让我一度怀疑自己是个假程序员.昨天终于克服了心里的"犹豫" ...
html导航栏悬停过渡,JS 实现导航栏悬停效果
JS-实现导航栏悬停先布个局: Test 1 tab1 tab2 tab3 tab4 2 3 4 5 6 7 添加简单的样式: div.main{ width: 800px; background: ...
html js左侧导航栏,js实现简单分页导航栏效果
本文实例为大家分享了js实现分页导航栏效果的具体代码,供大家参考,具体内容如下最终的效果: 1. 分页需要的几个重要参数: 总记录条数: totalCount (查数据库) 每页记录数: pageS ...
透明导航 html,导航栏(Nav) 全透明效果的一种另类实现
首先,我们看看不经过任何处理的Nav层级结构: Nav层级结构其中需要注意是:UIImageView是导航栏下面的那条线.有时候我们会发现Nav有一层蒙版,其实都是UIVisualEffectVie ...
导航栏鼠标悬浮弹出子菜单面板的实现方案
当鼠标移动到导航栏某个字块时,悬浮出一块子菜单面板实现: 在导航栏的字块镶嵌一块要悬浮的div,设置display为none. jquery设置字块鼠标悬浮mouseover的事件为:显示悬浮div ...
html怎么让导航栏背景透明,Swift - 导航栏背景全透明效果的实现（沉浸式效果）...
由于导航栏背景透明,那么整个视图的背景便会占据全部的可视区域,从而让用户有一种沉浸式的体验.下面通过样例演示如何实现这个效果. 1,实现原理 (1)如果想让导航栏(navigationBar)透明,只 ...
js实现导航栏随着页面向下滑动逐渐显示，向上滑动逐渐隐藏
一.html代码  <nav id="dao"> <x-icon type="ios-arrow-back" ...
android浮动标题栏,GitHub - DARTTTTT/LBehavior: 跟随手势滑动，显示隐藏标题栏、底部导航栏及悬浮按钮的Android Behavior Library...
LBehavior 简单实现标题栏.导航栏滑动动画效果图博客介绍 Download allprojects { repositories { ... maven { url 'https://ji ...

JS实现导航栏下滑悬浮透明置顶

JS实现导航栏下滑悬浮透明置顶相关推荐

最新文章

热门文章