root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #13589 from mrobinet/scrollspy-maxScroll-with-offset 

Adjust for Scrollspy offset when calculating maxScroll.
This commit is contained in:
Chris Rebert 2014-05-23 14:36:05 -07:00
parent bc1ce426d9 c2e94eba8d
commit 475dbe58b0
2 changed files with 37 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/scrollspy.js
View File

@ -69,7 +69,7 @@
ScrollSpy.prototype.process = function () {
var scrollTop = this.$scrollElement.scrollTop() + this.options.offset
var scrollHeight = this.$scrollElement[0].scrollHeight || Math.max(this.$body[0].scrollHeight, document.documentElement.scrollHeight)
var maxScroll = scrollHeight - this.$scrollElement.height()
var maxScroll = this.options.offset + scrollHeight - this.$scrollElement.height()
var offsets = this.offsets
var targets = this.targets
var activeTarget = this.activeTarget

38
js/tests/unit/scrollspy.js
View File

@ -42,7 +42,8 @@ $(function () {
ok($topbar.find('.active', true))
})
test('should only switch active class on current target', function () {
asyncTest('should only switch active class on current target', function () {
expect(1);
var sectionHTML = '<div id="root" class="active">' +
'<div class="topbar">' +
'<div class="topbar-inner">' +
@ -75,7 +76,40 @@ $(function () {
.find('#scrollspy-example')
.bootstrapScrollspy({target: '#ss-target'})
$scrollSpy.scrollTop(350);
$scrollSpy.on('scroll.bs.scrollspy', function () {
ok($section.hasClass('active'), 'Active class still on root node')
start()
})
$scrollSpy.scrollTop(350);
})
asyncTest('middle navigation option correctly selected when large offset is used', function () {
expect(3);
var sectionHTML = '<div id="header" style="height: 500px;"></div>' +
'<nav id="navigation" class="navbar">' +
'<ul class="nav navbar-nav">' +
'<li class="active"><a id="one-link" href="#one">One</a></li>' +
'<li><a id="two-link" href="#two">Two</a></li>' +
'<li><a id="three-link" href="#three">Three</a></li>' +
'</ul>' +
'</nav>' +
'<div id="content" style="height: 200px; overflow-y: auto;">' +
'<div id="one" style="height: 500px;"></div>' +
'<div id="two" style="height: 300px;"></div>' +
'<div id="three" style="height: 10px;"></div>' +
'</div>',
$section = $(sectionHTML).appendTo('#qunit-fixture'),
$scrollSpy = $section
.show()
.filter('#content')
$scrollSpy.bootstrapScrollspy({target: '#navigation', offset: $scrollSpy.position().top})
$scrollSpy.on('scroll.bs.scrollspy', function () {
ok(!$section.find('#one-link').parent().hasClass('active'), 'Active class removed from first section')
ok($section.find('#two-link').parent().hasClass('active'), 'Active class on middle section')
ok(!$section.find('#three-link').parent().hasClass('active'), 'Active class not on last section')
start()
})
$scrollSpy.scrollTop(550);
})
})