jQuery右侧悬浮楼层滚动 电梯菜单
http://www.kaiu.net/effectCon.aspx?id=2198
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery右侧悬浮楼层滚动代码 - 开优网络</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
html {
box-sizing: border-box;
} *,
*:after,
*:before {
box-sizing: inherit;
} html,
body {
height: %;
} body {
font-family: "Roboto", Helvetica, Arial, sans-serif;
margin: ;
} h1 {
margin: ;
padding: ;
} section {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: rgba(,,,0.5);
font-size: 2rem;
min-height: %;
height: 100vh;
} .Quick-navigation {
position: fixed;
z-index: ;
margin: ;
top: %;
right: ;
-webkit-transform: translateY(-%);
transform: translateY(-%);
} .Quick-navigation-item {
color: rgba(,,,0.4);
text-decoration: none;
font-size: .3em;
-webkit-transition: color .3s;
transition: color .3s;
padding: .5em;
display: block;
} .Quick-navigation-item:hover,
.Quick-navigation-item.current {
color: #fff;
} .Scroll-progress-indicator {
will-change: opacity, transform;
-webkit-transition: all .5s;
transition: all .5s;
left: -10px;
border-radius: 2px;
position: absolute;
top: %;
opacity: ;
padding: 2em;
-webkit-transform: translateX(%) translateY(-%);
transform: translateX(%) translateY(-%);
background-color: rgba(,,,0.1);
} .Scroll-progress-indicator.visible {
-webkit-transform: translateX(-%) translateY(-%);
transform: translateX(-%) translateY(-%);
opacity: ;
} #A {
background-color: #dc143c;
} #B {
background-color: #eb2049;
height: 600px;
} #C {
background-color: #ed395d;
} #D {
background-color: #ef5271;
height: 200px;
} #E {
background-color: #f26a85;
} .Scroll-to-top {
position: fixed;
right: 20px;
bottom: ;
background-color: rgba(,,,0.2);
border: none;
color: rgba(,,,0.5);
font-size: .5rem;
padding: .5em;
cursor: pointer;
opacity: ;
-webkit-transform: translateY(%);
transform: translateY(%);
-webkit-transition: all .3s;
transition: all .3s;
outline: none;
} .Scroll-to-top.visible {
opacity: ;
-webkit-transform: translateY();
transform: translateY();
} .Scroll-to-top:hover {
color: rgba(,,,0.9);
}
</style>
</head>
<body>
<nav class="Quick-navigation">
<a href="#A" class="Quick-navigation-item">A</a>
<a href="#B" class="Quick-navigation-item">B</a>
<a href="#C" class="Quick-navigation-item">C</a>
<a href="#D" class="Quick-navigation-item">D</a>
<a href="#E" class="Quick-navigation-item">E</a>
<div class="Scroll-progress-indicator"></div>
</nav>
<section id="A" class="js-scroll-step">
<h1>A</h1>
</section>
<section id="B" class="js-scroll-step">
<h1>B</h1>
</section>
<section id="C" class="js-scroll-step">
<h1>C</h1>
</section>
<section id="D" class="js-scroll-step">
<h1>D</h1>
</section>
<section id="E" class="js-scroll-step">
<h1>E</h1>
</section>
<button class="Scroll-to-top">Scroll To Top</button>
<script>
(function () {
//////////////////////
// Utils
//////////////////////
function throttle(fn, delay, scope) {
// Default delay
delay = delay || ;
var last, defer;
return function () {
var context = scope || this,
now = +new Date(),
args = arguments;
if (last && now < last + delay) {
clearTimeout(defer);
defer = setTimeout(function () {
last = now;
fn.apply(context, args);
}, delay);
} else {
last = now;
fn.apply(context, args);
}
}
}
function extend(destination, source) {
for (var k in source) {
if (source.hasOwnProperty(k)) {
destination[k] = source[k];
}
}
return destination;
}
//////////////////////
// END Utils
//////////////////////
//////////////////////
// Scroll Module
//////////////////////
var ScrollManager = (function () {
var defaults = {
steps: null,
navigationContainer: null,
links: null,
scrollToTopBtn: null,
navigationElementClass: '.Quick-navigation',
currentStepClass: 'current',
smoothScrollEnabled: true,
stepsCheckEnabled: true,
// Callbacks
onScroll: null,
onStepChange: function (step) {
var self = this;
var relativeLink = [].filter.call(options.links, function (link) {
link.classList.remove(self.currentStepClass);
return link.hash === '#' + step.id;
});
relativeLink[].classList.add(self.currentStepClass);
},
// Provide a default scroll animation
smoothScrollAnimation: function (target) {
$('html, body').animate({
scrollTop: target
}, 'slow');
}
},
options = {};
// Privates
var _animation = null,
currentStep = null,
throttledGetScrollPosition = null;
return {
scrollPosition: ,
init: function (opts) {
options = extend(defaults, opts);
if (options.steps === null) {
console.warn('Smooth scrolling require some sections or steps to scroll to :)');
return false;
}
// Allow to customize the animation engine ( jQuery / GSAP / velocity / ... )
_animation = function (target) {
target = typeof target === 'number' ? target : $(target).offset().top;
return options.smoothScrollAnimation(target);
};
// Activate smooth scrolling
if (options.smoothScrollEnabled) this.smoothScroll();
// Scroll to top handling
if (options.scrollToTopBtn) {
options.scrollToTopBtn.addEventListener('click', function () {
options.smoothScrollAnimation();
});
}
// Throttle for performances gain
throttledGetScrollPosition = throttle(this.getScrollPosition).bind(this);
window.addEventListener('scroll', throttledGetScrollPosition);
window.addEventListener('resize', throttledGetScrollPosition);
this.getScrollPosition();
},
getScrollPosition: function () {
this.scrollPosition = window.pageYOffset || window.scrollY;
if (options.stepsCheckEnabled) this.checkActiveStep();
if (typeof options.onScroll === 'function') options.onScroll(this.scrollPosition);
},
scrollPercentage: function () {
var body = document.body,
html = document.documentElement,
documentHeight = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
var percentage = Math.round(this.scrollPosition / (documentHeight - window.innerHeight) * );
if (percentage < ) percentage = ;
if (percentage > ) percentage = ;
return percentage;
},
doSmoothScroll: function (e) {
if (e.target.nodeName === 'A') {
e.preventDefault();
if (location.pathname.replace(/^\//, '') === e.target.pathname.replace(/^\//, '') && location.hostname === e.target.hostname) {
var targetStep = document.querySelector(e.target.hash);
targetStep ? _animation(targetStep) : console.warn('Hi! You should give an animation callback function to the Scroller module! :)');
}
}
},
smoothScroll: function () {
if (options.navigationContainer !== null) options.navigationContainer.addEventListener('click', this.doSmoothScroll);
},
checkActiveStep: function () {
var scrollPosition = this.scrollPosition;
[].forEach.call(options.steps, function (step) {
var bBox = step.getBoundingClientRect(),
position = step.offsetTop,
height = position + bBox.height;
if (scrollPosition >= position && scrollPosition < height && currentStep !== step) {
currentStep = step;
step.classList.add(self.currentStepClass);
if (typeof options.onStepChange === 'function') options.onStepChange(step);
}
step.classList.remove(options.currentStepClass);
});
},
destroy: function () {
window.removeEventListener('scroll', throttledGetScrollPosition);
window.removeEventListener('resize', throttledGetScrollPosition);
options.navigationContainer.removeEventListener('click', this.doSmoothScroll);
}
}
})();
//////////////////////
// END scroll Module
//////////////////////
//////////////////////
// APP init
//////////////////////
var scrollToTopBtn = document.querySelector('.Scroll-to-top'),
steps = document.querySelectorAll('.js-scroll-step'),
navigationContainer = document.querySelector('.Quick-navigation'),
links = navigationContainer.querySelectorAll('a'),
progressIndicator = document.querySelector('.Scroll-progress-indicator');
ScrollManager.init({
steps: steps,
scrollToTopBtn: scrollToTopBtn,
navigationContainer: navigationContainer,
links: links,
// Customize onScroll behavior
onScroll: function () {
var percentage = ScrollManager.scrollPercentage();
percentage >= ? scrollToTopBtn.classList.add('visible') : scrollToTopBtn.classList.remove('visible');
if (percentage >= ) {
progressIndicator.innerHTML = percentage + "%";
progressIndicator.classList.add('visible');
} else {
progressIndicator.classList.remove('visible');
}
},
// Behavior when a step changes
// default : highlight links
// onStepChange: function (step) {},
// Customize the animation with jQuery, GSAP or velocity
// default : jQuery animate()
// Eg with GSAP scrollTo plugin
//smoothScrollAnimation: function (target) {
// TweenLite.to(window, 2, {scrollTo:{y:target}, ease:Power2.easeOut});
//}
});
//////////////////////
// END APP init
//////////////////////
})();
</script> </body>
</html>
jQuery右侧悬浮楼层滚动 电梯菜单的更多相关文章
- 基于jquery右侧悬浮加入购物车代码
分享一款基于jquery右侧悬浮加入购物车代码.这是一款基于jQuery实现的仿天猫右侧悬浮加入购物车菜单代码. 在线预览 源码下载 实现的代码: <!--左侧产品parabola.js控制 ...
- jQuery制作右侧边垂直二级导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 纯CSS实现带返回顶部右侧悬浮菜单
这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果,如下图, 使用工具是Hbuilder. 代码如下: <!DOCTYPE html> <html> <head> ...
- jquery版楼层滚动特效
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>楼 ...
- jquery页面滚动，菜单固定到顶部
// 菜单固定 $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $("#topp").offset().top; //滚动条事件 $(wi ...
- jquery自定义插件-参数化配置多级菜单导航栏插件
1 自定义菜单导航栏插件的必要性 看图说话,下面是利用自定义的菜单导航栏插件simpleMenu创建的网站导航示例: 插件默认提供的是如上图的导航栏样式,即一二级菜单为横向分布:三四级菜单为纵向分布. ...
- 支持微信页面右侧悬浮QQ在线客服
使用方法: 1.将style里的css样式复制到你的样式表中 2.将body中的代码部分拷贝到你需要的地方即可 (js.图片采用绝对路径,不建议修改) <!DOCTYPE html PUBLIC ...
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- jQuery 顶部导航尾随滚动，固定浮动在顶部
jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...
随机推荐
- 【Linux】- CentOS搭建FTP服务器
1.安装vsftpd yum install -y vsftpd 2.启动vsftpd服务 service vsftpd start 3.查看运行状态 netstat -nltp | 完毕!!! 参考 ...
- 【Docker 命令】- run命令
docker run :创建一个新的容器并运行一个命令 语法: docker run [OPTIONS] IMAGE [COMMAND] [ARG...] OPTIONS说明: -a stdin: 指 ...
- Jenkins系列-Jenkins插件下载镜像加速
可供选择的jenkins2 插件镜像列表: Jenkins 所有镜像列表: http://mirrors.jenkins-ci.org/status.html比如日本的镜像: http://mirro ...
- Python使用又拍云进行第三方文件拉取
在爬虫过程中,需要将图片或其他文件进行存储到云上,但在下载图片时,看官方文档,貌似需要先下载到后再上传又拍云,感觉效率很低下.经查找资料实现Python直接对第三方资源进行文件拉取操作,即不需要下载到 ...
- C#多线程间的同步问题
使用线程时最头痛的就是共享资源的同步问题,处理不好会得到错误的结果,C#处理共享资源有以下几种: 1.lock锁 需要注意的地方: 1).lock不能锁定空值某一对象可以指向Null,但Null是不需 ...
- GSL介绍【转】
GSL(GNU Scientific Library)是一个C写成的用于科学计算的库,下面是一些相关的包 http://www.thebigdata.cn/JiShuBoKe/5612.html
- 转：浅谈Spectral Clustering 谱聚类
浅谈Spectral Clustering Spectral Clustering,中文通常称为“谱聚类”.由于使用的矩阵的细微差别,谱聚类实际上可以说是一“类”算法. Spectral Cluste ...
- [BZOJ5339] [TJOI2018]教科书般的亵渎
题目链接 BZOJ题面. 洛谷题面. Solution 随便推一推,可以发现瓶颈在求\(\sum_{i=1}^n i^k\),关于这个可以看看拉格朗日插值法. 复杂度\(O(Tm^2)\). #inc ...
- BZOJ5339：[TJOI2018]教科书般的亵渎——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=5339 https://www.luogu.org/problemnew/show/P4593 小豆 ...
- BZOJ3224：普通平衡树——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=3224 题面源于洛谷 题目描述 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下 ...