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 ...
随机推荐
- 今天是python专场UDP socket 链接
type = SOCK_DGRAM UDP 协议的通信优势 允许一个服务器的同时和多个客户端通信 server import socket sk = socket.socket(type=socket ...
- EntityFramework Core 3.0查询
前言 随着.NET Core 3.0的发布,EF Core 3.0也随之正式发布,关于这一块最近一段时间也没太多去关注,陆续会去对比之前版本有什么变化没有,本节我们来看下两个查询. 分组 我们知道在E ...
- 数据表与简单java类——多对多映射
给定一张Meber和Product表,得到如下信息: 1.获取一个用户访问的所有商品信息 2.获取一个商品被哪些用户浏览过的信息 package Mapping_transformation; cla ...
- Spring 框架基础(05)：事务管理机制，和实现方式
本文源码:GitHub·点这里 || GitEE·点这里 一.Spring事务管理 1.基础描述 Spring事务管理的本质就是封装了数据库对事务支持的操作,使用JDBC的事务管理机制,就是利用jav ...
- MySQL5.7.18自动化安装脚本
背景 很好的朋友邱启明同学,擅长MySQL,目前任职某大型互联网业MySQL DBA,要来一套MySQL自动安装的Shell脚本,贴出来保存一些. 此版本为 MySQL 5.7.18 ###### 自 ...
- bs4-爬取小说
bs4 bs4有两种运行方式一种是处理本地资源,一种是处理网络资源 本地 from bs4 import BeautifulSoup if __name__ == '__main__': fr = o ...
- Mac从拆箱到入门
Mac从拆箱到入门 记录首次使用Mac的我的历程,不是专业的Mac使用教程,只是简单的记录.还有我在使用过程中一些用到的功能都一些小提示吧. 1.首次开机配置,对于一个完全的新手来说(也就是我) ...
- HTML+CSS的小实例
通过一个月以来对HTML5+CSS的学习.这篇随笔给大家来做一个简单的网页中常见的导航栏. 这些都称之为网页中的导航栏. 我简单的做了一个某宝和58同城的导航栏,供大家学习参考. 一.58同城导航栏: ...
- 【开发者portal在线开发插件系列二】多条上下行消息（messageId的使用）【华为云技术分享】
前言和基本操作请参考[开发者portal在线开发插件系列一]profile和基本上下行消息,此处不再复述,没操作过的小伙伴一定要先去看看哦~ 话不多说,开始今天的演(表)示(演) 场景说明: 假设一: ...
- 基于webpack实现多html页面开发框架二 css打包、支持scss、文件分离
本节主要介绍webpack打包的时候CSS的处理方式 一.解决什么问题 1.CSS打包 2.CSS处理浏览器兼容 3.SASS支持 4.CSS分离成单独的文件 ...