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"> < ...
随机推荐
- 修改IntelliJ IDEA字体
- Expected Conditions的常用函数
Expected Conditions的使用场景有两种 1.直接在断言中使用 2.与WebDriverWait配合使用,动态等待页面上元素出现或者消失 1. title_is: 判断当前页面的ti ...
- Winform程序部署方式总结二——Windows Installer发布
针对Winform程序,介绍两种常用打包方式:ClickOnce和Windows Installer 应用程序如下: 二.Windows Installer发布 1.新建项目 创建后视图 第一步: 应 ...
- WPF布局间的切换方法
效果图,两种效果间的切换
- query 获取本身的HTML
<div class="test"><p>hello,你好!</p></div> <script> $(".t ...
- BZOJ4770 图样（概率期望+动态规划）
考虑求出所有MST的权值和再除以方案数,方案数显然是2mn. 按位考虑,显然应该让MST里的边高位尽量为0.那么根据最高位是0还是1将点集划分成两部分,整张图的MST就是由两部分各自的MST之间连一条 ...
- BZOJ4709 JSOI2011柠檬（动态规划）
首先要冷静下来发现这仅仅是在划分区间.显然若有相邻的数字相同应当划分在同一区间.还有一个显然的性质是区间的两端点应该相同且选择的就是端点的数.瞬间暴力dp就变成常数极小100002了.可以继续斜率优化 ...
- JavaScript中:表达式和语句的区别
JavaScript中:表达式和语句的区别 Javascript语言精粹:表达式是由运算符构成,并运算产生结果的语法结构.程序是由语句构成,语句则是由“:(分号)”分隔的句子或命令.如果在表达式后面加 ...
- POJ3648：Wedding——题解（配2-SAT简易讲解）
http://poj.org/problem?id=3648 (在家,而且因为2-SAT写的不明不白的,所以这篇详细写) 题目大意: 有一对新人结婚,邀请了n-1 对夫妇去参加婚礼.婚礼上所有人要坐在 ...
- UOJ117：欧拉回路——题解
http://uoj.ac/problem/117 (作为一道欧拉回路的板子题,他成功的令我学会了欧拉回路) (然而我不会背……) 就两件事: 1.无向图为欧拉图,当且仅当为连通图且所有顶点的度为偶数 ...