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】- nohup 和 &
&的意思是在后台运行, 什么意思呢? 意思是说,当你在执行 ./a.out & 的时候,即使你用ctrl C,那么a.out照样运行(因为对SIGINT信号免疫).但是要注意,如果你直 ...
- [socket编程] 一个服务器与多个客户端之间通信
转自:http://blog.csdn.net/neicole/article/details/7539444 并加以改进 Server程序: // OneServerMain.cpp #includ ...
- BZOJ 1509 逃学的小孩(树的直径)
题意:从树上任找三点u,v,w.使得dis(u,v)+min(dis(u,w),dis(v,w))最大. 有一个结论u,v必是树上直径的两端点. 剩下的枚举w就行了. 具体不会证... # inclu ...
- NOIP2002 提高组
[NOIP2002] 提高组 T1.均分纸牌 算法:贪心(模拟) [分析]: 1.简化 2.过滤 3.辩证法 详见课件的例7 还有一种类似的思路是:求出平均值后,i←1 to n-1扫描,若a[i] ...
- axios请求,拦截器的使用
1. axios 创建请求 import axios from 'axios' import {Message} from 'element-ui' import router from " ...
- BZOJ1026：[SCOI2009]windy数——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=1026 Description windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2 ...
- 51NOD 1934：受限制的排列——题解
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1934 听说会笛卡尔树的人这题都秒了啊…… 参考:https://blog ...
- C++中typedef和#define简介
本文基于<C++ Primer(第5版)>和网上博客,整理而成. 一.类型别名 类型别名是一个名字,它是某种类型的同义词,有两种方法可用于定义类型别名:typedef.using. 1.关 ...
- AOJ. 数组训练.2016-11-17
A题 #include <stdio.h> #include <stdlib.h> #define max 1000 __int64 a[max] = {0,1,1}; int ...
- [LOJ 6000]搭配飞行员
link 其实就是一道二分图匹配板子,我们建立$S$,$T$为源点与汇点,然后分别将$S$连向所有正驾驶员,边权为$1$,然后将副驾驶员与$T$相连,边权为$1$,将数据中给出的$(a,b)$,将$a ...