Skip to content

Commit 81f2b58

Browse files
author
Rafael J. Staib
committed
Add sticky scroll to the new test design
1 parent fd76425 commit 81f2b58

File tree

3 files changed

+173
-60
lines changed

3 files changed

+173
-60
lines changed

‎javascripts/jquery.stickyscroll.js

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
$.fn.stickyscroll = function(options) {
2+
3+
var os = options;
4+
if(!options) {
5+
os = {
6+
t:0,
7+
b:window
8+
};
9+
}
10+
11+
if(typeof os.b == 'undefined') {
12+
os = {
13+
t:(typeof os.t != 'undefined' ? os.t : undefined),
14+
b:window
15+
}
16+
}
17+
if(options == 'reset') {
18+
os.t = undefined
19+
}
20+
21+
return this.each(function() {
22+
23+
var defaults = {position: 'left', leftOffset: 0, rightOffset: 0, t: os.t, b: os.b};
24+
var opts = $.extend(defaults, this.os);
25+
var o = $.meta ? $.extend({}, opts, $.data()) : opts;
26+
27+
var isWindow = (typeof o.b.screen != 'undefined' ? true : false);
28+
29+
var w = $(o.b).width();
30+
var sticky = $(this);
31+
var parent = $(sticky).parent().width();
32+
$(o.b).bind('scroll', scroll);
33+
if(!isWindow) {
34+
$(window).bind('scroll', scroll);
35+
}
36+
var offsets = getOffsets();
37+
var start = offsets.top;
38+
var begin = offsets.begin;
39+
var end = offsets.end;
40+
41+
function getOffsets(){
42+
if(!isWindow) {
43+
var pos = $(sticky).position();
44+
pos.top -= $(o.b).offset().top
45+
pos.begin = $(o.b).offset().top
46+
pos.end = $(o.b).next().offset().top
47+
return pos;
48+
}
49+
else {
50+
var pos = $(sticky).offset();
51+
pos.begin = 0;
52+
pos.end = $(window).height();
53+
return pos;
54+
}
55+
}
56+
function scroll() {
57+
var position = $(o.b).scrollTop();
58+
var positionOffset = position+o.t;
59+
var windowPosition = $(window).scrollTop();
60+
61+
if(!isWindow){
62+
chkOffsets = getOffsets();
63+
begin = chkOffsets.begin;
64+
}
65+
66+
//figure out if moving?
67+
var move = false;
68+
if(isWindow && positionOffset > start) {
69+
move = true;
70+
}
71+
else if(!isWindow) {
72+
if(windowPosition < (end - o.t) && windowPosition > begin) {
73+
move = true;
74+
}
75+
else if(positionOffset > begin) {
76+
move = true;
77+
}
78+
}
79+
80+
if(move) {
81+
if(!$(sticky).hasClass('scrolling')) {
82+
$(sticky).addClass('scrolling');
83+
}
84+
85+
if(!isWindow && windowPosition < (begin - o.t)) {
86+
$(sticky).css('top', (begin - windowPosition - o.t) + 'px');
87+
}
88+
else {
89+
$(sticky).css('top',(o.t + 'px'));
90+
}
91+
}
92+
else {
93+
if($(sticky).hasClass('scrolling')) {
94+
$(sticky).removeClass('scrolling');
95+
}
96+
$(sticky).css('top','');
97+
}
98+
}
99+
100+
});
101+
};

‎stylesheets/stylesheet2.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,8 @@ body
6868
font-family: 'Helvetica Neue', Helvetica, Arial, serif;
6969
font-weight: 400;
7070
color: #666;
71+
72+
height: 300em;
7173
}
7274

7375
a
@@ -87,6 +89,8 @@ header
8789
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
8890
background: #2e7bcf url(../images/header-bg.jpg) 0 0 repeat-x;
8991
border-bottom: solid 1px #275da1;
92+
position: fixed;
93+
width: 100%;
9094
}
9195

9296
header h1
@@ -127,6 +131,10 @@ footer
127131

128132
#content-wrapper
129133
{
134+
background: #fafafa url(../images/body-bg.jpg) 0 0 repeat;
135+
position: relative;
136+
top: 235px;
137+
height: 100%;
130138
}
131139

132140
#content-wrapper > .steps

‎test.html

Lines changed: 64 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,13 @@
3131

3232
<script src="javascripts/jquery-1.9.1.min.js"></script>
3333
<script src="javascripts/jquery.steps.min.js"></script>
34+
<script src="javascripts/jquery.stickyscroll.js"></script>
3435
<!--[if lt IE 9]>
3536
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
3637
<![endif]-->
3738
</head>
3839
<body>
39-
<header>
40+
<header id="header">
4041
<div class="inner">
4142
<h1>jquery-steps</h1>
4243
<h2>A powerful jQuery wizard plugin that supports accessibility and HTML5.</h2>
@@ -60,7 +61,7 @@ <h3><span class="icons download"></span>Download</h3>
6061
<section></section>
6162
</div>
6263

63-
<footer role="contentinfo">
64+
<footer id="footer" role="contentinfo">
6465
<p>Copyright 2013 by Rafael J. Staib</p>
6566
</footer>
6667

@@ -77,74 +78,77 @@ <h3><span class="icons download"></span>Download</h3>
7778
enablePagination: false
7879
});
7980

80-
tabControl.find(".steps").append('<div class="share">' +
81-
'<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://rstaib.github.io/jquery-steps" data-text="jQuery Steps" data-via="RafaelStaib" data-hashtags="jquerysteps">Tweet</a>' +
82-
'<div class="fb-like" data-href="http://rstaib.github.io/jquery-steps" data-send="false" data-layout="button_count" data-width="110" data-show-faces="false" data-font="arial"></div>' +
83-
'<iframe src="http://ghbtns.com/github-btn.html?user=rstaib&repo=jquery-steps&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>' +
84-
'</div>');
81+
var headerHeight = $("#header").height();
82+
$("#content-wrapper > .steps").stickyscroll({ t: headerHeight });
83+
84+
//tabControl.find(".steps").append('<div class="share">' +
85+
// '<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://rstaib.github.io/jquery-steps" data-text="jQuery Steps" data-via="RafaelStaib" data-hashtags="jquerysteps">Tweet</a>' +
86+
// '<div class="fb-like" data-href="http://rstaib.github.io/jquery-steps" data-send="false" data-layout="button_count" data-width="110" data-show-faces="false" data-font="arial"></div>' +
87+
// '<iframe src="http://ghbtns.com/github-btn.html?user=rstaib&repo=jquery-steps&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>' +
88+
//'</div>');
8589

8690
// Twitter Star Button
87-
!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');
91+
//!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');
8892

8993
// Facebook Like Button
90-
(function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
94+
//(function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
9195
});
9296

9397
// Google Analytics
94-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
95-
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
96-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
97-
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
98+
//(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
99+
//(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
100+
//m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
101+
//})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
98102

99-
ga('create', 'UA-40997516-1', 'rstaib.github.io');
100-
ga('send', 'pageview');
103+
//ga('create', 'UA-40997516-1', 'rstaib.github.io');
104+
//ga('send', 'pageview');
101105

102106
// Anchor Event Tracking
103-
$(function()
104-
{
105-
var filetypes = /\.(zip|exe|pdf|doc*|xls*|ppt*|mp3|js|md)$/i,
106-
baseHref = "";
107-
if ($("base").attr("href") != undefined)
108-
{
109-
baseHref = $("base").attr("href");
110-
}
111-
112-
$("a").each(function()
113-
{
114-
var href = $(this).attr("href");
115-
if (href && (href.match(/^https?\:/i)) && (!href.match(document.domain)))
116-
{
117-
$(this).click(function()
118-
{
119-
ga("send", "event", "External", "Click", href.replace(/^https?\:\/\//i, ""));
120-
if ($(this).attr("target") != null && $(this).attr("target").toLowerCase() !== "_blank")
121-
{
122-
setTimeout(function() { location.href = href; }, 200);
123-
return false;
124-
}
125-
});
126-
}
127-
else if (href && href.match(/^mailto\:/i))
128-
{
129-
$(this).click(function()
130-
{
131-
ga("send", "event", "Email", "Click", href.replace(/^mailto\:/i, ""));
132-
});
133-
}
134-
else if (href && href.match(filetypes))
135-
{
136-
$(this).click(function()
137-
{
138-
ga("send", "event", "Download", "Click", href);
139-
if ($(this).attr("target") != null && $(this).attr("target").toLowerCase() !== "_blank")
140-
{
141-
setTimeout(function() { location.href = baseHref + href; }, 200);
142-
return false;
143-
}
144-
});
145-
}
146-
});
147-
});
107+
//$(function()
108+
//{
109+
// var filetypes = /\.(zip|exe|pdf|doc*|xls*|ppt*|mp3|js|md)$/i,
110+
// baseHref = "";
111+
// if ($("base").attr("href") != undefined)
112+
// {
113+
// baseHref = $("base").attr("href");
114+
// }
115+
116+
// $("a").each(function()
117+
// {
118+
// var href = $(this).attr("href");
119+
// if (href && (href.match(/^https?\:/i)) && (!href.match(document.domain)))
120+
// {
121+
// $(this).click(function()
122+
// {
123+
// ga("send", "event", "External", "Click", href.replace(/^https?\:\/\//i, ""));
124+
// if ($(this).attr("target") != null && $(this).attr("target").toLowerCase() !== "_blank")
125+
// {
126+
// setTimeout(function() { location.href = href; }, 200);
127+
// return false;
128+
// }
129+
// });
130+
// }
131+
// else if (href && href.match(/^mailto\:/i))
132+
// {
133+
// $(this).click(function()
134+
// {
135+
// ga("send", "event", "Email", "Click", href.replace(/^mailto\:/i, ""));
136+
// });
137+
// }
138+
// else if (href && href.match(filetypes))
139+
// {
140+
// $(this).click(function()
141+
// {
142+
// ga("send", "event", "Download", "Click", href);
143+
// if ($(this).attr("target") != null && $(this).attr("target").toLowerCase() !== "_blank")
144+
// {
145+
// setTimeout(function() { location.href = baseHref + href; }, 200);
146+
// return false;
147+
// }
148+
// });
149+
// }
150+
// });
151+
//});
148152
</script>
149153
</body>
150154
</html>

0 commit comments

Comments
 (0)