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"> < ...
随机推荐
- 播放MP3
播放背景音乐 上文来自:http://blog.csdn.net/henulwj/article/details/8977738 using System; using System.Collecti ...
- ManagementObjectSearcher的使用
1.获取本地路径的网络访问地址 private IEnumerable<KeyValuePair<string, string>> GetShareFolders() { va ...
- Pandas速查手册中文版（转）
关键缩写和包导入 在这个速查手册中,我们使用如下缩写: df:任意的Pandas DataFrame对象 同时我们需要做如下的引入: import pandas as pd 导入数据 pd.read_ ...
- BER-TLV数据结构
本文是自身在研究学习过程中碰到的问题,整理而成. 为了便于后文的引用说明,先列出一段TLV结构的数据: [6F] 4D │ ├─[] A0000003330101 │ ├─[A5] │ │ ├─[] ...
- (sender as TButton).some 和 TButton(sender).some 的区别是什么？
(sender as TButton).some 和 TButton(sender).some 的区别是什么? (Sender as TButton) 与 TButton(Sender) 都是 Typ ...
- mysql(三) 慢查询分析(二)
在一般的查询中,都要求尽量围绕创建的索引进行.针对索引,常用的有主键索引,单列索引,组合索引,索引合并等. 在评价索引时,关键看区分度.索引区分度=索引列唯一值/表记录数. 如果在区分度很低的列上建索 ...
- Runtime之字典转模型实战
Runtime之字典转模型实战 先来看看怎么使用Runtime给模型类赋值 iOS开发中的Runtime可谓是功能强大,同时Runtime使用起来也是非常灵活的,今天博客的内容主要就是使用到一丁点的R ...
- BZOJ4289 PA2012Tax（最短路）
一个暴力的做法是把边看成点,之间的边权为两边的较大权值,最短路即可.但这样显然会被菊花图之类的卡掉. 考虑优化建图.将边拆成两个有向边,同样化边为点.原图中同一条边在新图中的两个点之间连边权为原边权的 ...
- Android Apk的反编译与代码混淆
一.反编译 1.获取工具: 既然是反编译,肯定要用到一些相关的工具,工具可以到这里下载,里面包含三个文件夹,用于反编译,查看反编译之后的代码: 其实这两工具都是google官方出的,也可在google ...
- Vue报错
Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 8.x Found ...