Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bugfix #186

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Bugfix #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b4eb4d0
Show the spacer if the target becomes absolute positioned.
Jun 4, 2015
019bcc8
Fix target with scrollbars.
Jun 4, 2015
570687c
Use originalFloat.
Jun 4, 2015
da722af
Cache $(window) to variable.
Jun 4, 2015
45752a3
Use decimal width.
MatiasRust Jun 4, 2015
f58d409
Consider offsetParent.
MatiasRust Jun 4, 2015
4d2ef34
Hide the spacer after insert and before first "setUnfix".
MatiasRust Jun 8, 2015
ccd0bc1
Correct window height for ios.
MatiasRust Jun 8, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion jquery-scrolltofixed-min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

60 changes: 36 additions & 24 deletions jquery-scrolltofixed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,9 @@

var className;

var $window = $(window);
var $offsetParent = $(target[0].offsetParent);

// Capture the original offsets for the target element. This needs to be
// called whenever the page size changes or when the page is first
// scrolled. For some reason, calling this before the page is first
Expand Down Expand Up @@ -138,7 +141,7 @@
'display' : target.css('display'),
'width' : dimensions.width,
'height' : dimensions.height,
'float' : target.css('float')
'float' : originalFloat
});

// Set the target element to fixed and set its width so it does
Expand All @@ -152,7 +155,9 @@
'bottom' : base.options.bottom == -1?'':base.options.bottom,
'margin-left' : '0px'
}
if (!base.options.dontSetWidth){ cssOptions['width']=target.css('width'); };
if (!base.options.dontSetWidth) {
cssOptions['width'] = dimensions.width;
};

target.css(cssOptions);

Expand All @@ -168,8 +173,9 @@

function setAbsolute() {

var top = getLimit();
var left = offsetLeft;
var parentOffset = $offsetParent.offset();
var top = getLimit() - parentOffset.top;
var left = offsetLeft - parentOffset.left;

if (base.options.removeOffsets) {
left = '';
Expand All @@ -183,10 +189,16 @@
'margin-left' : '0px',
'bottom' : ''
}
if (!base.options.dontSetWidth){ cssOptions['width']=target.css('width'); };
if (!base.options.dontSetWidth) {
cssOptions['width'] = target[0].getBoundingClientRect().width;
};

target.css(cssOptions);

// If the static target becomes absolute positioned
// it requires the spacer.
spacer.css('display', target.css('display'));

position = 'absolute';
}

Expand Down Expand Up @@ -248,6 +260,7 @@
// Checks to see if we need to do something based on new scroll position
// of the page.
function checkScroll() {

if (!$.isScrollToFixed(target) || target.is(':hidden')) return;
var wasReset = isReset;
var wasUnfixed = isUnfixed();
Expand All @@ -268,25 +281,25 @@
}

// Grab the current horizontal scroll position.
var x = $(window).scrollLeft();
var x = $window.scrollLeft();

// Grab the current vertical scroll position.
var y = $(window).scrollTop();
var y = $window.scrollTop();

// Get the limit, if there is one.
var limit = getLimit();

// If the vertical scroll position, plus the optional margin, would
// put the target element at the specified limit, set the target
// element to absolute.
if (base.options.minWidth && $(window).width() < base.options.minWidth) {
if (base.options.minWidth && $window.width() < base.options.minWidth) {
if (!isUnfixed() || !wasReset) {
postPosition();
target.trigger('preUnfixed.ScrollToFixed');
setUnfixed();
target.trigger('unfixed.ScrollToFixed');
}
} else if (base.options.maxWidth && $(window).width() > base.options.maxWidth) {
} else if (base.options.maxWidth && $window.width() > base.options.maxWidth) {
if (!isUnfixed() || !wasReset) {
postPosition();
target.trigger('preUnfixed.ScrollToFixed');
Expand Down Expand Up @@ -335,7 +348,7 @@
}
} else {
if (limit > 0) {
if (y + $(window).height() - target.outerHeight(true) >= limit - (getMarginTop() || -getBottom())) {
if (y + window.innerHeight - target.outerHeight(true) >= limit - (getMarginTop() || -getBottom())) {
if (isFixed()) {
postPosition();
target.trigger('preUnfixed.ScrollToFixed');
Expand Down Expand Up @@ -455,7 +468,7 @@

// Create a spacer element to fill the void left by the target
// element when it goes fixed.
spacer = $('<div />');
spacer = $('<div />').css('display', 'none');

position = target.css('position');
originalPosition = target.css('position');
Expand All @@ -467,16 +480,16 @@

// Reset the target element offsets when the window is resized, then
// check to see if we need to fix or unfix the target element.
$(window).bind('resize.ScrollToFixed', windowResize);
$window.bind('resize.ScrollToFixed', windowResize);

// When the window scrolls, check to see if we need to fix or unfix
// the target element.
$(window).bind('scroll.ScrollToFixed', windowScroll);
$window.bind('scroll.ScrollToFixed', windowScroll);

// For touch devices, call checkScroll directlly rather than
// rAF wrapped windowScroll to animate the element
if ('ontouchmove' in window) {
$(window).bind('touchmove.ScrollToFixed', checkScroll);
$window.bind('touchmove.ScrollToFixed', checkScroll);
}

if (base.options.preFixed) {
Expand Down Expand Up @@ -512,12 +525,13 @@
spacer.height(target.height());
});

target.bind('scroll.ScrollToFixed', function() {
target.trigger('preUnfixed.ScrollToFixed');
setUnfixed();
target.trigger('unfixed.ScrollToFixed');
checkScroll();
});
// If the target has scrollbars this code breaks its behaviour.
// target.bind('scroll.ScrollToFixed', function() {
// target.trigger('preUnfixed.ScrollToFixed');
// setUnfixed();
// target.trigger('unfixed.ScrollToFixed');
// checkScroll();
// });

target.bind('detach.ScrollToFixed', function(ev) {
preventDefault(ev);
Expand All @@ -526,17 +540,15 @@
setUnfixed();
target.trigger('unfixed.ScrollToFixed');

$(window).unbind('resize.ScrollToFixed', windowResize);
$(window).unbind('scroll.ScrollToFixed', windowScroll);
$window.unbind('resize.ScrollToFixed', windowResize);
$window.unbind('scroll.ScrollToFixed', windowScroll);

target.unbind('.ScrollToFixed');

//remove spacer from dom
spacer.remove();

base.$el.removeData('ScrollToFixed');
});

// Reset everything.
windowResize();
};
Expand Down