首页 > 代码库 > Jquery定位插件,固定元素在页面某个位置,不随滚动条滚动

Jquery定位插件,固定元素在页面某个位置,不随滚动条滚动

代码:

(function ($) {    "use strict";    $.fn.pin = function (options) {        var scrollY = 0, elements = [], disabled = false, $window = $(window);        options = options || {};        var recalculateLimits = function () {            for (var i = 0, len = elements.length; i < len; i++) {                var $this = elements[i];                if (options.minWidth && $window.width() <= options.minWidth) {                    if ($this.parent().is(".pin-wrapper")) { $this.unwrap(); }                    $this.css({ width: "", left: "", top: "", position: "" });                    if (options.activeClass) { $this.removeClass(options.activeClass); }                    disabled = true;                    continue;                } else {                    disabled = false;                }                var $container = options.containerSelector ? $this.closest(options.containerSelector) : $(document.body);                var offset = $this.offset();                var containerOffset = $container.offset();                var parentOffset = $this.offsetParent().offset();                if (!$this.parent().is(".pin-wrapper")) {                    $this.wrap("<div class=‘pin-wrapper‘>");                }                var pad = $.extend({                    top: 0,                    bottom: 0                }, options.padding || {});                $this.data("pin", {                    pad: pad,                    from: (options.containerSelector ? containerOffset.top : offset.top) - pad.top,                    to: containerOffset.top + $container.height() - $this.outerHeight() - pad.bottom,                    end: containerOffset.top + $container.height(),                    parentTop: parentOffset.top                });                $this.css({ width: $this.outerWidth() });                $this.parent().css("height", $this.outerHeight());            }        };        var onScroll = function () {            if (disabled) { return; }            scrollY = $window.scrollTop();            var elmts = [];            for (var i = 0, len = elements.length; i < len; i++) {                var $this = $(elements[i]),                    data = $this.data("pin");                if (!data) { // Removed element                    continue;                }                elmts.push($this);                var from = data.from - data.pad.bottom,                    to = data.to - data.pad.top;                if (from + $this.outerHeight() > data.end) {                    $this.css(‘position‘, ‘‘);                    continue;                }                if (from < scrollY && to > scrollY) {                    !($this.css("position") == "fixed") && $this.css({                        left: $this.offset().left,                        top: data.pad.top                    }).css("position", "fixed");                    if (options.activeClass) { $this.addClass(options.activeClass); }                } else if (scrollY >= to) {                    $this.css({                        left: "",                        top: to - data.parentTop + data.pad.top                    }).css("position", "absolute");                    if (options.activeClass) { $this.addClass(options.activeClass); }                } else {                    $this.css({ position: "", top: "", left: "" });                    if (options.activeClass) { $this.removeClass(options.activeClass); }                }            }            elements = elmts;        };        var update = function () { recalculateLimits(); onScroll(); };        this.each(function () {            var $this = $(this),                data = $(this).data(‘pin‘) || {};            if (data && data.update) { return; }            elements.push($this);            $("img", this).one("load", recalculateLimits);            data.update = update;            $(this).data(‘pin‘, data);        });        $window.scroll(onScroll);        $window.resize(function () { recalculateLimits(); });        recalculateLimits();        $window.load(update);        return this;    };})(jQuery);

调用方法:

$("#fixdiv").pin();

注意如页面有动态生成的HTML,请在HTML生成之后调用 pin()

 

Jquery定位插件,固定元素在页面某个位置,不随滚动条滚动