功能1 -- 顶部导航栏和返回顶部效果

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>顶部导航栏效果和返回顶部</title></head><body><style type="text/css">* {margin: 0;padding: 0;}body {background: #ddd;}div {height: 2000px;}.nav {width: 100%;border-bottom: 1px solid #383e41;background-color: rgba(0, 0, 0, 0.5);position: fixed;top: 0;height: 80px;z-index: 11;}.nav.active {background-color: rgba(0, 0, 0, 1);}.go-top {width: 44px;height: 44px;background: url(http://images.cnblogs.com/cnblogs_com/lgyong/1411096/t_goTop.png) no-repeat center;background-size: 100%;cursor: pointer;position: fixed;bottom: 100px;right: 0;display: none;box-shadow: 0 0px 15px 3px rgba(29, 33, 36, 0.3);}
</style><div><nav class="nav"></nav><div class="go-top"></div>
</div><script type="text/javascript">// js
    window.onscroll = function () {console.log('on')let bannerTopHeight = document.getElementsByClassName('nav')[0];var t = document.documentElement.scrollTop || document.body.scrollTop;console.log(t)console.log(bannerTopHeight.offsetHeight)if (t >= bannerTopHeight.offsetHeight) {bannerTopHeight.setAttribute('class', 'nav active')} else {bannerTopHeight.setAttribute('class', 'nav')}let fixedBox = document.getElementsByClassName('go-top')[0];if (t >= 300) {fixedBox.style.display = 'block';} else {fixedBox.style.display = 'none';}}
</script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">// jquery
    $(window).scroll(function (event) {if ($(window).scrollTop() !== 0) {$(".go-top").fadeIn();} else {$(".go-top").fadeOut();}$(".go-top").click(function () {$("html,body").animate({scrollTop: 0}, 300);return false;})$(".go-top").on('touchstart',function () {$("html,body").animate({scrollTop: 0}, 300);return false;})var bannerTopHeight = $(".nav").height();if ($(window).scrollTop() >= bannerTopHeight) {$(".nav").addClass("active");} else {$(".nav").removeClass("active");}});
</script>
</body></html>

View Code

转载于:https://www.cnblogs.com/lgyong/p/10531979.html

功能1 -- 顶部导航栏和返回顶部效果相关推荐

vue---museui解决底部/顶部导航栏位置固定问题
移动端页面通常会包括顶部导航或底部导航栏,导航栏一般固定在页面上. 问题描述如下: 导航栏未固定,顶部红色导航栏会随着页面下滚而消失,底部的蓝色导航栏会根据页面内容变化而上下浮动,视觉体验非常不好. ...
uni-app开发：tabar组件与顶部导航栏（功能开发篇）
uni-app开发:tabar组件与顶部导航栏(含右侧icon点击功能)[结合:案例Demo截图] 一.效果图 · 截图: 二. tabar组件 + 顶部导航栏(含右侧icon点击功能) 组件的代码调 ...
vue.js项目实战运用篇之抖音视频APP-第四节：顶部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
Android仿微信底部菜单栏+今日头条顶部导航栏
背景 Android应用几乎都会用到底部菜单栏,在Material Design还没有出来之前,TabHost等技术一直占主流,现在Google新sdk中提供了TabLayout类可以便捷的做出底部菜 ...
react native 之自定义顶部导航栏，实现标题居中可控
本来一直用的都是RN自带的组件react-navigation,但是后面需求有变,需要顶部导航栏目的标题可以自己控制,同一页面的标题根据数据库查出来的内容变化.因此自定义了一个导航栏目,实现需求. 关 ...
Android开发笔记（二十）顶部导航栏ActionBar
标题栏ActionBar ActionBar是在Android3.0之后引入的,所以Android2.x之前的版本不能直接使用ActionBar.现在ActionBar广泛用做APP的顶部导航栏,它在 ...
使用 HTML/CSS 实现 Educoder 顶部导航栏
第1关:使用flex布局实现Educoder顶部导航栏容器布局任务描述本关任务:使用flex布局实现容器两端对齐的效果. 效果如下: 相关知识使用flex布局实现左右分开布局的方式有多种: 使用 ...
页面最上方的搜索和logo叫什么_网页顶部导航栏设计总结
网页中顶部导航栏往往是用户进入网站后最先看到的地方,决定着用户对网页的第一印象,其重要性不言而喻. 网页中的header,一般我们称之为顶部导航栏,这里为了行文方便,以下都简称顶部栏.顶部栏对于一个网 ...
uniapp开发微信小程序自定义顶部导航栏
自定义导航栏渐变色,先上效果使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色全局定义导航栏 "windo ...
微信小程序顶部导航栏点击选项产生颜色变化和底部下划线显示
在很多程序中都有一个功能,就是顶部导航栏点击的时候能自动切换页面,并且选中的模块会变换颜色并且底部出现一条横线. 首先思考这个功能的实现原理--通过"点击"这个动作,我们能知道点击 ...

功能1 -- 顶部导航栏和返回顶部效果

功能1 -- 顶部导航栏和返回顶部效果相关推荐

最新文章

热门文章