JS---封装getScroll函数 & 案例：固定导航栏
封装getScroll函数
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
//浏览器的滚动事件
window.onscroll = function () {
console.log(getScroll().top);
};
案例：固定导航栏
获取scrollTop值后判断高度大于导航栏的高，就设置样式固定住，同时，主页部分的marginTop值，为防止浮动/脱标造成的影响，这个值设置为导航栏的高
<!DOCTYPE html>
<html> <head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
} img {
vertical-align: top;
} .main {
margin: 0 auto;
width: 1000px;
margin-top: 10px; } .fixed {
position: fixed;
top: 0;
left: 0;
}
</style>
</head> <body>
<div class="top" id="topPart">
<img src="data:images/top.png" alt="" />
</div>
<div class="nav" id="navBar">
<img src="data:images/nav.png" alt="" />
</div>
<div class="main" id="mainPart">
<img src="data:images/main.png" alt="" />
</div>
<script src="common.js"></script>
<script> //获取页面向上或者向左卷曲出去的距离的值
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
top: window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
} //滑动事件
window.onscroll = function () {
if (getScroll().top >= my$("topPart").offsetHeight) {
//设置第二个div的类样式
my$("navBar").className = "nav fixed";
//设置第三个div的mainTop值
my$("mainPart").style.marginTop = my$("navBar").offsetHeight + "px";
} else {
my$("navBar").className = "nav";
my$("mainPart").style.marginTop = "10px";
}
};
</script> </body> </html>
JS---封装getScroll函数 & 案例：固定导航栏的更多相关文章
- fullpage.js 结合固定导航栏—实现定位导航栏
开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- 固定导航栏（jquery）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- js实现用按钮控制网页滚动、以及固定导航栏效果
实现效果如下: 页面内有三个按钮,分别控制页面向上.向下移动,以及暂停,并设置有导航栏,在滚动到某一位置时显示.且当用户主动控制鼠标滑轮时,滚动效果自动关闭.本页面只是演示如何实现,进行了简单的布局, ...
- 用原生JS实现爱奇艺首页导航栏
以下是爱奇艺首页的一个导航栏,用原生js写的,静态页面效果如下: 代码如下: <html> <head> <title>爱奇艺</title> < ...
- JQuery实现仿腾讯的固定导航栏
1.描述 窗口滚动一定高度之后才让导航栏固定 2.要点 浏览器滚动的事件:$(window).scroll(functiuon(){ 文档滚过的高度: $(doucment).scrollTop(); ...
- 固定导航栏demo
代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...
- 原生JS封装_new函数，实现new关键字的功能
1.前言 众所周知:没有对象怎么办?那就new一个! 那么在JS中,当我们new一个对象的时候,这个new关键字内部都干了什么呢? 现在我们就来剖析一下原生JS中new关键字内部的工作原理. 2.原生 ...
- JS封装继承函数
function extend(child,parent){ var F=function(){} F.prototype=parent.prototype; child.prototype=new ...
随机推荐
- scss--函数 (Functions)--unit
(Sass::Script::Value::String) unit($number) Returns the unit(s) associated with a number. Complex un ...
- Java基础-Java基本语法
注释: 1:多行 /* */ 2:单行 // 3:文档 /** */ 基本数据类型: 1:整形 byte(1) short(2) int(4) long(8)(一般申明lo ...
- Python模块——loguru日志模块简单学习
Python loguru模块简单学习 首先安装模块:pip install logoru,然后引入模块: from loguru import logger 1.直接输出到console logge ...
- linux任务计划cron、chkconfig工具、systemd管理服务、unit和target介绍
第8周第1次课(5月14日) 课程内容: 10.23 linux任务计划cron10.24 chkconfig工具10.25 systemd管理服务10.26 unit介绍10.27 target介绍 ...
- JDK官方下载
平时进行java开发时避免不了使用jdk,而现在jdk版本已经到1.9了,但是之前版本下载在官方网站就不好找了(主要还是因为网站是英文的): 进入官网下载jdk的前提是进入官网,直接百度搜jdk下载也 ...
- Day01-初识 Python
1.CPU/内存/硬盘/操作系统 CPU :计算机的运算和处理中心,相当于人类的大脑. 内存 :暂时存储数据,临时加载数据应用程序. 硬盘 :长期存储数据. 操作系统:一个软件,连接计算机的硬件与所有 ...
- __getattribute__(self, obj) 这个方法中的obj这个参数
class Itcast(object): def __init__(self, subject1): self.subject1 = subject1 print("^^^^^^^---- ...
- Unity3D for iOS初级教程：Part 3/3(上)
转自:http://www.cnblogs.com/alongu3d/archive/2013/06/01/3111738.html 欢迎来到第三部分,这是Unity 3D for iOS初级系列教程 ...
- pandas学习（四）--数据的归一化
欢迎加入python学习交流群 667279387 Pandas学习(一)–数据的导入 pandas学习(二)–双色球数据分析 pandas学习(三)–NAB球员薪资分析 pandas学习(四)–数据 ...
- nitacm20317 来自张司机的挑战书
题目:让你求从x到y中(1<=x<=y<=10^18),二进制一的个数最多的数是哪个,如果有多个相同的答案,输出最小的. 题目链接:https://www.nitacm.com/pr ...