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 - ...
随机推荐
- 分享一款开源堡垒机-jumpserver
本文主文章地址为:https://blog.csdn.net/KH_FC JumpServer是由FIT2CLOUD(飞致远)公司旗下一款开源的堡垒机,这款也是全球首款开源的堡垒机,使用 GNU GP ...
- Sentry 企业级数据安全解决方案 - Relay 监控 & 指标收集
内容整理自官方文档 系列 Sentry 企业级数据安全解决方案 - Relay 入门 Sentry 企业级数据安全解决方案 - Relay 运行模式 Sentry 企业级数据安全解决方案 - Rela ...
- python + web自动化，点击不生效，提示“selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element is not clickable at point (117, 674)”
前言: 在做web自动化时,遇到一个缩放了浏览器比例的操作,从100%缩小到80%,再进行点击的时候,弹出报错信息,无法点击 selenium.common.exceptions.ElementCli ...
- Linux系统使用crt登录之后如何显示横幅消息
打开 /etc/motd 编辑内容即可 效果如下
- Standalone集群搭建和Spark应用监控
注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6815920501530034696/ 承接上一篇文档<Spark词频前十的统计练习> Spark on ...
- vue iview element-ui兼容IE11浏览器
首先安装babel-polyfill npm install babel-polyfill --save-dev 入口文件引用,在main.js中引用 import 'babel-polyfill' ...
- 自旋锁-JUC系列
公众号原文:自旋锁-JUC系列 前言 2022!这个年份现在看起来都觉得有那么些恍惚的未来感,然而现在已在脚下. 无边落木萧萧下, 不尽长江滚滚来! 人生如白驹过隙! 本来计划最近把AQS源码分析做了 ...
- day 17 i++优先级大于 *i
(1).有下列定义语句,int *p[4];以下选项中与此语句等价的是[C] (A).int p[4]; (B).int **P; (C).int *(p[4]); (D).int (*p)[4]; ...
- day5 数组对角线及最大值
1.输出M行M列数组方针,求对角线元素和#define M 5void fun(int xx[][M], int n)//n行n列{ int i = 0; int sum = 0; for (i = ...
- 《剑指offer》面试题67. 把字符串转换成整数
问题描述 写一个函数 StrToInt,实现把字符串转换成整数这个功能.不能使用 atoi 或者其他类似的库函数. 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止. ...