wduffy / jScroll

jScroll is a jQuery plugin that keeps an element in view when a user scrolls.
http://www.wduffy.co.uk/jScroll
73 stars 19 forks source link

unset height of div : possible bug #3

Open brycepelletier opened 13 years ago

brycepelletier commented 13 years ago

Browser in Question: FF v 3.5.4, Safari v 5.0.1, Opera v 11.5 OS: Mac OS X 10.5.8

Issue:

In the event that the container div does not have a height set in css the plugin will currently scroll the scrollable div down infinitely by expanding the container div infinitely. Is there a way to keep the scrollable div from expanding the containing div, or maybe including some settings so that we can eliminate the expansion by setting {container_expansion: false}?

This is a dynamically built site so the divs for both the scrolling div and the container div have variable heights depending on the page displayed. If you need an example just message me and I can send you a link.

Chrome v 13.0.782.215 does not seem to have this issue

okyanet commented 13 years ago

I had the same issue, solved it by calculating and storing the parent container height before the 'sticky' topmargin is calculated.

Change to:

    // Private 
    function location($element)
    {
        this.min = $element.offset().top;
        this.originalMargin = parseInt($element.css("margin-top"), 10) || 0;
        this.parentHeight = $element.parent().height();  // added

        this.getMargin = function ($window)
        {
            var max = this.parentHeight - $element.outerHeight();   // amended
            var margin = this.originalMargin;
jesuissur commented 13 years ago

We had another problem with unset height for the container div. The scrollable div was always to a negative marginTop value. We've added a new option to push a custom function for getting the parent height. In our case, we've created a function to compute the height of the dynamic container div. This is the new version

(function ($) {

    // Public: jScroll Plugin
    $.fn.jScroll = function (options) {

        var opts = $.extend({}, $.fn.jScroll.defaults, options);

        return this.each(function () {
            var $element = $(this);
            var $window = $(window);
            var locator = new location($element);

            $window.scroll(function () {
                $element
                    .stop()
                    .animate(locator.getMargin($window), opts.speed);
            });
        });

        // Private 
        function location($element) {
            this.min = $element.offset().top;
            this.originalMargin = parseInt($element.css("margin-top"), 10) || 0;

            this.getMargin = function ($window) {
                var max = opts.getParentHeight() - $element.outerHeight(); // CHANGED
                var margin = this.originalMargin;

                if ($window.scrollTop() >= this.min)
                    margin = margin + opts.top + $window.scrollTop() - this.min;

                if (margin > max)
                    margin = max;

                return ({ "marginTop": margin + 'px' });
            }
        }

    };

    // Public: Default values
    $.fn.jScroll.defaults = {
        speed: "slow",
        top: 10,
        getParentHeight: function () { $element.parent().height(); } // ADDED
    };

})(jQuery);