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"> < ...
随机推荐
- TFS持续集成
TFS持续集成的就是跟踪代码变更,合并,能够自定义脚本,任务进行自动化测试,发版,部署,有点像docker的味道.在这个代理服务器分布式中tfsserver起着能够随时拿去最新代码能够统一执行任务的角 ...
- 软工网络15团队作业4——Alpha阶段敏捷冲刺-3
一.当天站立式会议照片: 二.项目进展 昨天已完成的工作: 依靠HTML 逻辑框架等技术完成程序界面前端的实现. 明天计划完成的工作: 依靠css 逻辑框架等技术完成程序界面前端的实现. 工作中遇到的 ...
- Qt代码覆盖率code coverage(VS版)
版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Qt代码覆盖率code coverage(VS版) 本文地址:http://techi ...
- FineCMS介绍
产品简介 FineCMS(简称免费版.企业版.公益版)是一款基于PHP+MySql+CI框架开发的高效简洁的中小型内容管理系统,面向多终端包括Pc端网页和移动端网页,支持自定义内容模型和会员模型, ...
- getGeneratedKeys自动获取主键的方法
public class Demo { public static void main(String[] args) { try { String sql="insert into pers ...
- 获得system32等系统文件权限
SYSTEM是至高无上的超级管理员帐户.默认情况下,我们无法直接在登录对话框上以SYSTEM帐户的身份登录到Windows桌面环境.实际上SYSTEM帐户早就已经“盘踞”在系统中了.根据http:// ...
- BZOJ 1797 最小割(最小割割边唯一性判定)
问题一:是否存在一个最小代价路径切断方案,其中该道路被切断? 问题二:是否对任何一个最小代价路径切断方案,都有该道路被切断? 现在请你回答这两个问题. 最小割唯一性判定 jcvb: 在残余网络上跑ta ...
- CF986B Petr and Permutations
题意翻译 Petr要打乱排列.他首先有一个从 111 到 nnn 的顺序排列,然后进行 3n3n3n 次操作,每次选两个数并交换它们. Alex也要打乱排列.他与Petr唯一的不同是他进行 7n+17 ...
- Socket_FTP
1. md5加密回顾: import hashlib m=hashlib.md5() #创建md5对象 m.update(b'abcd') #生成加密串 m.update(b'efg') print( ...
- hadoop 使用Avro求最大值
在上例中:hadoop MapReduce辅助排序解析,为了求每年的最大数据使用了mapreduce辅助排序的方法. 本例中介绍利用Avro这个序列化框架的mapreduce功能来实现求取最大值.Av ...