From 2c204a04c6a1c24f9414b09eed56b3ae0c15b36d Mon Sep 17 00:00:00 2001 From: Jonas Aschenbrenner Date: Thu, 16 Oct 2014 15:39:06 +0200 Subject: [PATCH 1/4] Fixes two bugs Fixes the following cases: * Element has no margin top * Fixed element height is less then window height --- jquery.lockfixed.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/jquery.lockfixed.js b/jquery.lockfixed.js index 04eb963..1618c9e 100644 --- a/jquery.lockfixed.js +++ b/jquery.lockfixed.js @@ -25,7 +25,7 @@ var el = $(el); if(el && el.offset()){ var el_position = el.css("position"), - el_margin_top = parseInt(el.css("marginTop"),10), + el_margin_top = parseInt(el.css("marginTop"),10) || 0, el_position_top = el.css("top"), el_top = el.offset().top, pos_not_fixed = false; @@ -69,7 +69,10 @@ if (scroll_top >= (el_top-(el_margin_top ? el_margin_top : 0)-config.offset.top)){ - if(max_height < (scroll_top + el_height + el_margin_top + config.offset.top)){ + if( + max_height < (scroll_top + el_height + el_margin_top + config.offset.top) && + el_height + config.offset.top > $(window).height() + ){ top = (scroll_top + el_height + el_margin_top + config.offset.top) - max_height; }else{ top = 0; @@ -87,4 +90,4 @@ } } }); -})(jQuery); \ No newline at end of file +})(jQuery); From e111a1f7fa9fcaff5e97ececdbecc2c06cc45868 Mon Sep 17 00:00:00 2001 From: Yvo Schaap Date: Mon, 17 Nov 2014 12:16:37 +0100 Subject: [PATCH 2/4] Move to npm: lockfixed Moving away from plugins.jquery.com to npmjs.org. Now available with npm: lockfixed --- .npmignore | 2 ++ package.json | 39 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 41 insertions(+) create mode 100644 .npmignore create mode 100644 package.json diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..d004a9a --- /dev/null +++ b/.npmignore @@ -0,0 +1,2 @@ +/node_modules/ +.DS_Store \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..2e23902 --- /dev/null +++ b/package.json @@ -0,0 +1,39 @@ +{ + "name": "lockfixed", + "title": "jQuery Lock Fixed", + "description": "jQuery plugin which allows for DOM elements to be positioned anywhere on the page, and lock within the user's viewport when scrolling. Common use case is a menu under a header, which on scrolling stays fixed within the viewport.", + "keywords": [ + "jquery-plugin", + "fixed", + "dom", + "ui", + "scroll", + "lockfixed", + "lock fixed", + "sticky" + ], + "version": "0.8.4", + "author": { + "name": "Yvo Schaap", + "url": "http://www.directlyrics.com/code/lockfixed/" + }, + "licenses": [ + { + "type": "MIT", + "url": "http://www.directlyrics.com/code/lockfixed/license.txt" + } + ], + "homepage": "http://www.directlyrics.com/code/lockfixed/", + "demo": "http://www.directlyrics.com/code/lockfixed/demo.html", + "docs": "http://www.directlyrics.com/code/lockfixed/", + "dependencies": { + "jquery": ">=1.5" + }, + "repository": { + "type": "git", + "url": "https://github.com/ymschaap/jquery-lockfixed" + }, + "bugs": { + "url": "https://github.com/ymschaap/jquery-lockfixed/issues" + } +} \ No newline at end of file From 7892e6a3e96848c1393a6403d1b4b855c2d80b31 Mon Sep 17 00:00:00 2001 From: Yvo Schaap Date: Mon, 30 Mar 2015 16:35:33 +0200 Subject: [PATCH 3/4] Wraps lockfixed element Adds a wrapper div around the lockfixed element to catch issues with toggling between position: fixed. --- jquery.lockfixed.js | 155 +++++++++++++++++++++------------------- jquery.lockfixed.min.js | 10 +-- 2 files changed, 86 insertions(+), 79 deletions(-) diff --git a/jquery.lockfixed.js b/jquery.lockfixed.js index 04eb963..3c904d9 100644 --- a/jquery.lockfixed.js +++ b/jquery.lockfixed.js @@ -2,89 +2,96 @@ * jQuery lockfixed plugin * http://www.directlyrics.com/code/lockfixed/ * - * Copyright 2012 Yvo Schaap + * Copyright 2012-2015 Yvo Schaap * Released under the MIT license * http://www.directlyrics.com/code/lockfixed/license.txt * - * Date: Sun March 4 2014 12:00:01 GMT + * Date: Sun March 30 2015 12:00:01 GMT */ -(function($, undefined){ - $.extend({ - /** - * Lockfixed initiated - * @param {Element} el - a jquery element, DOM node or selector string - * @param {Object} config - offset - forcemargin - */ - "lockfixed": function(el, config){ - if (config && config.offset) { - config.offset.bottom = parseInt(config.offset.bottom,10); - config.offset.top = parseInt(config.offset.top,10); - }else{ - config.offset = {bottom: 100, top: 0}; - } - var el = $(el); - if(el && el.offset()){ - var el_position = el.css("position"), - el_margin_top = parseInt(el.css("marginTop"),10), - el_position_top = el.css("top"), - el_top = el.offset().top, - pos_not_fixed = false; - - /* - * We prefer feature testing, too much hassle for the upside - * while prettier to use position: fixed (less jitter when scrolling) - * iOS 5+ + Android has fixed support, but issue with toggeling between fixed and not and zoomed view - */ - if (config.forcemargin === true || navigator.userAgent.match(/\bMSIE (4|5|6)\./) || navigator.userAgent.match(/\bOS ([0-9])_/) || navigator.userAgent.match(/\bAndroid ([0-9])\./i)){ - pos_not_fixed = true; - } +(function($, undefined) { + $.extend({ + /** + * Lockfixed initiated + * @param {Element} el - a jquery element, DOM node or selector string + * @param {Object} config - offset - forcemargin + */ + "lockfixed": function(el, config) { + if (config && config.offset) { + config.offset.bottom = parseInt(config.offset.bottom, 10); + config.offset.top = parseInt(config.offset.top, 10); + } else { + config.offset = { + bottom: 100, + top: 0 + }; + } + var el = $(el); + if (el && el.offset()) { + var el_position = el.css("position"), + el_margin_top = parseInt(el.css("marginTop"), 10), + el_position_top = el.css("top"), + el_top = el.offset().top, + pos_not_fixed = false; - /* - // adds throttle to scroll call - $(window).bind('scroll',el,function(e){ + //We prefer feature testing, too much hassle for the upside + //while prettier to use position: fixed (less jitter when scrolling) + //iOS 5+ && Android does has fixed support, but results in issue with toggeling between fixed and viewport zoom - window.setTimeout(function(){ - $(document).trigger('lockfixed:pageupdate'); - },25); - }); - */ + if (config.forcemargin === true || navigator.userAgent.match(/\bMSIE (4|5|6)\./) || navigator.userAgent.match(/\bOS ([0-9])_/) || navigator.userAgent.match(/\bAndroid ([0-9])\./i)) { + pos_not_fixed = true; + } - $(window).bind('DOMContentLoaded load scroll resize orientationchange lockfixed:pageupdate',el,function(e){ - // if we have a input focus don't change this (for smaller screens) - if(pos_not_fixed && document.activeElement && document.activeElement.nodeName === "INPUT"){ - return; - } + // We wrap the element with the height of the lockfixed, because position: fixed removes the height leaving an empty area (and some jitter) + el.wrap("
"); - var top = 0, - el_height = el.outerHeight(), - el_width = el.outerWidth(), - max_height = $(document).height() - config.offset.bottom, - scroll_top = $(window).scrollTop(); - - // if element is not currently fixed position, reset measurements ( this handles DOM changes in dynamic pages ) - if (el.css("position") !== "fixed" && !pos_not_fixed) { - el_top = el.offset().top; - el_position_top = el.css("top"); - } + // Bind to most comment events that will need to recalculate our lockfixed position + $(window).bind('DOMContentLoaded load scroll resize orientationchange lockfixed:pageupdate', el, function(e) { + // if we have a input focus don't change this (for smaller screens) + if (pos_not_fixed && document.activeElement && document.activeElement.nodeName === "INPUT") { + return; + } - if (scroll_top >= (el_top-(el_margin_top ? el_margin_top : 0)-config.offset.top)){ + var top = 0, + el_height = el.outerHeight(), + el_width = el.outerWidth(), + max_height = $(document).height() - config.offset.bottom, + scroll_top = $(window).scrollTop(); - if(max_height < (scroll_top + el_height + el_margin_top + config.offset.top)){ - top = (scroll_top + el_height + el_margin_top + config.offset.top) - max_height; - }else{ - top = 0; - } + // if element is not currently fixed position, reset measurements ( this handles DOM changes in dynamic pages ) + if (el.css("position") !== "fixed" && !pos_not_fixed) { + el_top = el.offset().top; + el_position_top = el.css("top"); + } - if (pos_not_fixed){ - el.css({'marginTop': (parseInt(scroll_top - el_top - top,10) + (2 * config.offset.top))+'px'}); - }else{ - el.css({'position': 'fixed','top':(config.offset.top-top)+'px','width':el_width +"px"}); - } - }else{ - el.css({'position': el_position,'top': el_position_top, 'width':el_width +"px", 'marginTop': (el_margin_top && !pos_not_fixed ? el_margin_top : 0)+"px"}); - } - }); - } - } - }); + if (scroll_top >= (el_top - (el_margin_top ? el_margin_top : 0) - config.offset.top)) { + + if (max_height < (scroll_top + el_height + el_margin_top + config.offset.top)) { + top = (scroll_top + el_height + el_margin_top + config.offset.top) - max_height; + } else { + top = 0; + } + + if (pos_not_fixed) { + el.css({ + 'marginTop': (parseInt(scroll_top - el_top - top, 10) + (2 * config.offset.top)) + 'px' + }); + } else { + el.css({ + 'position': 'fixed', + 'top': (config.offset.top - top) + 'px', + 'width': el_width + "px" + }); + } + } else { + el.css({ + 'position': el_position, + 'top': el_position_top, + 'width': el_width + "px", + 'marginTop': (el_margin_top && !pos_not_fixed ? el_margin_top : 0) + "px" + }); + } + }); + } + } + }); })(jQuery); \ No newline at end of file diff --git a/jquery.lockfixed.min.js b/jquery.lockfixed.min.js index 0736814..4548f7c 100644 --- a/jquery.lockfixed.min.js +++ b/jquery.lockfixed.min.js @@ -2,12 +2,12 @@ * jQuery lockfixed plugin * http://www.directlyrics.com/code/lockfixed/ * - * Copyright 2012 Yvo Schaap + * Copyright 2012-2015 Yvo Schaap * Released under the MIT license * http://www.directlyrics.com/code/lockfixed/license.txt * - * Date: Sun March 4 2014 12:00:01 GMT + * Date: Sun March 30 2015 12:00:01 GMT */ -(function(e,p){e.extend({lockfixed:function(a,b){b&&b.offset?(b.offset.bottom=parseInt(b.offset.bottom,10),b.offset.top=parseInt(b.offset.top,10)):b.offset={bottom:100,top:0};if((a=e(a))&&a.offset()){var n=a.css("position"),c=parseInt(a.css("marginTop"),10),l=a.css("top"),h=a.offset().top,f=!1;if(!0===b.forcemargin||navigator.userAgent.match(/\bMSIE (4|5|6)\./)||navigator.userAgent.match(/\bOS ([0-9])_/)||navigator.userAgent.match(/\bAndroid ([0-9])\./i))f=!0;e(window).bind("DOMContentLoaded load scroll resize orientationchange lockfixed:pageupdate", -a,function(k){if(!f||!document.activeElement||"INPUT"!==document.activeElement.nodeName){var d=0,d=a.outerHeight();k=a.outerWidth();var m=e(document).height()-b.offset.bottom,g=e(window).scrollTop();"fixed"===a.css("position")||f||(h=a.offset().top,l=a.css("top"));g>=h-(c?c:0)-b.offset.top?(d=m");e(window).bind("DOMContentLoaded load scroll resize orientationchange lockfixed:pageupdate",a,function(k){if(!f||!document.activeElement||"INPUT"!==document.activeElement.nodeName){var d=0,d=a.outerHeight();k=a.outerWidth();var m=e(document).height()-b.offset.bottom,g=e(window).scrollTop();"fixed"===a.css("position")||f||(h=a.offset().top,l=a.css("top"));g>=h-(c?c:0)-b.offset.top?(d=m Date: Mon, 30 Mar 2015 16:43:31 +0200 Subject: [PATCH 4/4] Version bump --- package.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 2e23902..0f15739 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,10 @@ "scroll", "lockfixed", "lock fixed", - "sticky" + "sticky", + "jquery" ], - "version": "0.8.4", + "version": "0.9.0", "author": { "name": "Yvo Schaap", "url": "http://www.directlyrics.com/code/lockfixed/"