js实现用按钮控制网页滚动、以及固定导航栏效果
实现效果如下：
页面内有三个按钮，分别控制页面向上、向下移动，以及暂停，并设置有导航栏，在滚动到某一位置时显示。且当用户主动控制鼠标滑轮时，滚动效果自动关闭。本页面只是演示如何实现，进行了简单的布局，没有过多的美化。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页滚动效果</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 0 auto;
}
.nav {
width: 100%;
height: 200px;
background-color: yellow;
}
.top {
width: 100%;
height: 400px;
background-color: red;
}
.content1, .content2 {
width: 100%;
height: 600px;
background-color: blue;
}
.bottom {
width: 100%;
height: 200px;
background-color: green;
}
.flower {
display: none;
width: 100%;
height: 50px;
background-color: black;
position: fixed;
top: 0;
opacity: 0.5;
}
.up, .down, .remove {
display: inline-block;
font-size: 40px;
line-height: 50px;
text-align: center;
width: 50px;
height: 50px;
background-color: white;
border: 1px solid #333333;
border-radius: 50%;
cursor: pointer;
position: fixed;
right: 40px;
}
.up:hover {
background-color: #eaeaea;
}
.down:hover {
background-color: #eaeaea;
}
.remove:hover {
background-color: #eaeaea;
}
.up {
bottom: 200px;
}
.down {
bottom: 80px;
}
.remove {
font-size: 25px;
bottom: 140px;
}
</style>
</head>
<body>
<div class="container">
<div class="nav"></div>
<div class="top"></div>
<div class="content1"></div>
<div class="content2"></div>
<div class="bottom"></div>
</div>
<div class="flower"></div>
<span class="up">△</span>
<span class="remove">♢</span>
<span class="down">▽</span>
</body>
</html>
<script>
let up = document.querySelector('.up');
let down = document.querySelector('.down');
let remove = document.querySelector('.remove');
let flower = document.querySelector('.flower');
let nav = document.querySelector('.nav');
let timer = null; //定时器
let flag = false; //控制定时器
let speed = 10; //控制滚动速度,数值越小越快
document.addEventListener('scroll', function () {
if (window.pageYOffset >= nav.offsetHeight) {
flower.style.display = 'block';
} else {
flower.style.display = 'none';
}
});
document.addEventListener('mousewheel', function () {
stop();
})
up.addEventListener('click', startUp);
down.addEventListener('click', startDown);
remove.addEventListener('click', stop);
function startUp() {
stop();
if (flag) {
timer = setInterval(function () {
document.documentElement.scrollTop--;
}, speed);
}
flag = !flag;
}
function startDown() {
stop();
if (flag) {
timer = setInterval(function () {
document.documentElement.scrollTop++;
}, speed);
}
flag = !flag;
}
function stop() {
clearInterval(timer);
flag = true;
}
</script>
js实现用按钮控制网页滚动、以及固定导航栏效果的更多相关文章
- 通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部（一）
回到顶部实例一 效果:默认隐藏导航栏,当滚动条滚到超过300px后导航栏和按钮出现,点击回到顶部按钮回到顶部,并隐藏导航栏和按钮(导航栏和按钮都是固定定位) <!doctype html> ...
- fullpage.js 结合固定导航栏—实现定位导航栏
开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...
- 导航菜单：jQuery粘性滚动导航栏效果
粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的: jQuery的 smint插件,也是一个导航菜单固定插件.当页滚动时,导航菜单 ...
- CSS制作一个简单网页的下拉导航栏
网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...
- 使用 jQuery.Pin 垂直滚动时固定导航
ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...
- iOS UITableView表视图滚动隐藏UINavigationController导航栏
UITableView 继承于UIScrollView 所以UIScrollView 的代理方法相同适用于UITableView 中 隐藏导航栏的方法为: self.navigationControl ...
- JS实现让滚轮控制网页头部显示与隐藏
在很多网站中都有鼠标网上滚动头部就会滑出,继续往下滚动就会隐藏,下面看看实现方法 scroll(); function scroll(){// 入口方法 这个方法是获取事件的兼容,获取delta -- ...
- h5滚动页面固定导航
1.需要效果 2.实现方法 (1)原生js实现 document.addEventListener('scroll', function (event) { var scrollDamo = wind ...
- js实现滚动条下拉到一定程度固定结算栏
实现效果如下: js代码实现如下: var a = $("body").height(); var b = $(window).height(); var c = a - b - ...
随机推荐
- [数据结构]FHQ-Treap
前言(个人评价FHQ-Treap) 这是一个巨佬(名叫范浩强)在冬令营交流的时候提出的数据结构(FHQ:\(\text{你干嘛非要旋转呢?Think Functional!}\))(可以看出FHQ大佬 ...
- Swoole 协程的并发调用及使用示例
示例一: 利用通道pop会自动挂起当前协程,等待生产者推送数据的特性,实现并发调用,并在协程完成后组合结果集. $serv = new Swoole\Http\Server("127.0.0 ...
- CSS基础 常见的元素显示模式
1.块级元素 属性:display:block 特点:1.一行只能显示一个元素 2.宽度默认是父元素的,高度是有内容撑开 3.可以设置宽.高常见块元素:div,p,h系列,ul.li,dl.dt.dd ...
- laravel源码分析-队列Queue
laravel 源码分析具体注释见 https://github.com/FX-Max/source-analysis-laravel 前言 队列 (Queue) 是 laravel 中比较常用的一个 ...
- linux 之 expect 交互操作（自动输入密码）
场景 需要实现执行一个命令,并自动输入密码. 实现 通过expect命令实现 spawn 交互程序开始后面跟命令或者指定程序expect 获取匹 ...
- webSocket 使用 HttpSession 的数据配置与写法
1.前言 webSoket 无法获取 HttpSession ,使用就更谈不上了 !!! 2解决过程 使用 configurator 注入即可 (1) 配置一个类 1 package cn.c ...
- Spark案例练习-PV的统计
关注公众号:分享电脑学习回复"百度云盘" 可以免费获取所有学习文档的代码(不定期更新) 云盘目录说明: tools目录是安装包res 目录是每一个课件对应的代码和资源等doc ...
- 【Spring专场】「AOP容器」不看源码就带你认识核心流程以及运作原理
前提回顾 前一篇文章主要介绍了spring核心特性机制的IOC容器机制和核心运作原理,接下来我们去介绍另外一个较为核心的功能,那就是AOP容器机制,主要负责承接前一篇代理模式机制中动态代理:JDKPr ...
- StringBuffer和String的区别
面试题:String为什么不可变 StringBuffer和StringBuilder的区别 String 和StringBuffer的区别: (一):String 类中的byte数组使用final修 ...
- Redis 应用问题
Redis 应用问题 1.缓存穿透 1.1.问题概述 key 对应的数据在数据源中不存在,每次针对此 key 的请求从缓存获取不到,请求都会压到数据源(也就是不断的去查数据库,从而使得数据库系统崩溃) ...