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 ...
随机推荐
- springboot+logback日志输出企业实践（上）
目录 1.引言 2.logback简介 3. springboot默认日志框架-logback 3.1 springboot示例工程搭建 3.2 日志输出与基本配置 3.2.1 日志默认输出 3.2. ...
- 【Luogu P3834】可持久化线段树（主席树）
Luogu P3834 可持久化数据结构就是支持在历史版本上进行查询和修改操作的数据结构. 主席树就是对线段树的改进,使之可持久化. 前置知识:动态开点线段树 我们利用权值(值域)线段树统计区间内的数 ...
- 算法整理（php语言完成），持续更行中......
一下所有实例中,均在同一个方法中,所以算法使用内部函数完成 归并排序 public function test1Action () { $tmp = 0; $al_merge = function($ ...
- 【Android - 组件】之IntentFilter的匹配规则
我们知道,Activity的启动模式分为两种,分别是显式启动和隐式启动.显式启动需要明确的指定被启动的对象的组件信息,包括包名和类名:而隐式启动需要 Intent 能够匹配目标组件的 IntentFi ...
- if判断语句的总结
1.表达式:关系表达式或逻辑表达式: 2.表达式的运算结果应该是“真”或者“假”: 真:执行该语句: 假:跳过该语句,执行下一条语句: 3.“语句”可以是单语句也可以是复合语句: ...
- SpringBoot 整合mongoDB并自定义连接池
SpringBoot 整合mongoDB并自定义连接池 得力于SpringBoot的特性,整合mongoDB是很容易的,我们整合mongoDB的目的就是想用它给我们提供的mongoTemplate,它 ...
- PHP 获取服务器详细信息的原生方法
获取系统类型及版本号: php_uname() (例:Windows NT PCA15130 6.1 build 7601 (Windows 7 Ultimate Edition Ser ...
- hybrid app初体验，和react-native一起飞
第一次启动了react-native的示例,今天主要把其中遇到的坑与解决的办法分享给大家.如有疏漏.错误还望指正. 首先还是要从hybrid app这个概念说起(如果对于这个过程不感兴趣的同学,可以直 ...
- 代码自动机（攻 ACwing 限时题）
#include<bits/stdc++.h> #include<windows.h> using namespace std; int tot=0; void an(int ...
- Dubbo初步
Dubbo 介绍 : Dubbo 是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的RPC 实现服务的输出和输入功能,可以和 Spring 框架无缝集成.Dubbo 框架,是基于容器 ...