Question

I’m trying to do the next thing with jQuery. I want that when you move throw the <h2 /> headings that higlight the right menu. My code is next to the images. Actually I only have the functionality that moves the menu and that when you click is moved and highlighted. I need do the same but with only moving the scrollbar.

Actual example working: http://jsfiddle.net/fAcTX/1/

---

---

    <div id="floating-divs">
        <div id="box-sidebar-menu" class="abt-ptn-sidebar-widget box-sidebar-menu-float">
            <ul>
                <li class="active"><a href="#header1">Peter Saville</a></li>
                <li><a href="#header2">About Saville Consulting</a></li>
                <li><a href="#header3">Clients</a></li>
            </ul>
        </div>
    </div>

<script>
    (function($) {
        $.fn.floatmenu = function(options) {
            // merges the given options with some default options
            var options = $.extend({
                topPadding: 10
            }, options);

            return this.each(function() {
                // fetches and initializes the current element.
                var obj = $(this);

                var position = $(obj).offset(),
                cssPosition = $(obj).css('position');

                // tests if a "position" was set on the element, if not, sets a default
                if(cssPosition == '') {
                    cssPosition = 'static';
                }

                // attaches an event to listen for scroll events
                $(window).scroll(function(e) {
                    // if the window's inner frame passes the top of the element,
                    // start moving the menu
                    if($(window).scrollTop() > (position.top - Number(options.topPadding))) {
                        $(obj).
                            css('position','fixed').
                            css('top', options.topPadding);
                    }
                    // the window's inner frame has not passed the menu, reset
                    // the objects position
                    else {
                        $(obj).css('position', cssPosition);
                    }
                });
            });
        };
    })(jQuery);

    $(document).ready(function(){
        $("#floating-divs").floatmenu();

        $("#box-sidebar-menu li a").click(function(){
            $("#box-sidebar-menu li").removeClass("active");
            $(this).parent().addClass("active");
        });
    });
</script>

Answer 1

Here is a working example.
link

I have changed the plugin a bit, in case you need to ushe or add some methods (ex. ‘update’). This plugin initializes with the initial top positions of every . They are pushed in the array elemPos, and than sent to the plugin. The main check of conditions is in this part(you have to modify it, it doesn’t have all the possible cases in this if condition):

                var localEl= 0;
                $.each(positionsTop , function(index, value) {
                    if (winTop > value) {
                        localEl= index;
                    }
                });

                if (currentEl != localEl) {
                    currentEl = localEl;
                    $('li.active', elem).toggleClass('active');
                    $($('li', elem)[currentEl]).toggleClass('active');
                }

Here is the whole plugin:

   (function($) {
var defaults = {
    topPadding: 10,
    posTops: [10, 20]
};
var options;
var currentEl = -1;
var methods = {
    init: function() {

        return this.each(function(elem) {

            // fetches and initializes the current element.
            var obj = $(this);

            var position = $(obj).offset(),
                cssPosition = $(obj).css('position');

            // tests if a "position" was set on the element, if not, sets a default
            if (cssPosition == '') {
                cssPosition = 'static';
            }
            var positionsTop = options.posTops;
            //reset counter
            $('a', elem).click(function(alink) {
                var parentUL = $('#floating-divs ul');
                currentEl = $(this).parent().index();

                // window.scrollBy(0,positionsTop[currentEl]);
                $(window).scrollTop(positionsTop[currentEl]);
            });


            // attaches an event to listen for scroll events
            $(window).scroll(function(e) {
                // if the window's inner frame passes the top of the element,
                // start moving the menu
                var winTop = $(window).scrollTop();
                if (winTop > (position.top - Number(options.topPadding))) {
                    $(obj).
                    css('position', 'fixed').
                    css('top', options.topPadding);

                    var localEl = 0;
                    $.each(positionsTop, function(index, value) {
                        if (winTop > value) {
                            localEl = index;
                        }
                    });

                    if (currentEl != localEl) {
                        currentEl = localEl;
                        $('li.active', elem).toggleClass('active');
                        $($('li', elem)[currentEl]).toggleClass('active');
                    }
                }
                //else
                //ADD CODE HERE FOR OTHER SCROLL POSITIONS
                // the window's inner frame has not passed the menu, reset
                // the objects position
                else {
                    $(obj).css('position', cssPosition);
                }
            });
        });

    },
    update: function(args) {
        alert(args);
    }
};

$.fn.floatmenu = function(arguments, method) {

    if (methods[method]) {
        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {

        options = $.extend(defaults, arguments);
        return methods.init.call(this, options);
    } else {
        $.error('Method ' + method + ' does not exist on jQuery.tooltip');
    }

};

})(jQuery);

This is very important part. You have to initialize the plugin with all the top positions of the divs:

    var elemPos = new Array();

    $('#example_1 div').each(function() {
        var pos = $(this).offset();
        elemPos.push(pos.top);
    });

    $("#floating-divs").floatmenu({
        topPadding: 10,
        posTops: elemPos
    });

Selection relative to position example