js access variable value

Question

The following is working fine, however is it possible to access the variable 'scrolled' value inside 'onEnter'?

$(document).ready(function () {

    var $window = $(window);

    function update() {

        var scrolled = $window.scrollTop();
        return scrolled;
    };



    $('.color').each(function (i, scrolled) {
        var position = $(this).position();

        $(this).scrollspy({
            min: position.top,
            max: position.top + $(this).height(),
            onEnter: function (element, position, scrolled) {
                var scrolled = $window.scrollTop();
                $window.bind('scroll', update);
                console.log(scrolled);
                if (element.id === 'one' || element.id === 'two') {
                    $('.slidingPannel').animate({
                        'background-position-x': '100%'
                    }, 100);
                } else {
                    $('.slidingPannel').animate({
                        'background-position-x': '125%'
                    }, 100);
                }
            },
            onLeave: function (element, position) {
                if (console) console.log('leaving ' + element.id);
            }
        });
    });
});

Chris Dixon · Accepted Answer · 2014-01-29 10:35:34Z

Change to this, you have scope issues:

$(document).ready(function () {
var scrolled;
var $window = $(window);

function update() {
    scrolled = $window.scrollTop();
};



$('.color').each(function (i, scrolled) {
    var position = $(this).position();

    $(this).scrollspy({
        min: position.top,
        max: position.top + $(this).height(),
        onEnter: function (element, position, scrolling) {
            scrolled = $window.scrollTop();
            $window.bind('scroll', update);
            console.log(scrolled); // or should this be "scrolling" ?
            if (element.id === 'one' || element.id === 'two') {
                $('.slidingPannel').animate({
                    'background-position-x': '100%'
                }, 100);
            } else {
                $('.slidingPannel').animate({
                    'background-position-x': '125%'
                }, 100);
            }
        },
        onLeave: function (element, position) {
            if (console) console.log('leaving ' + element.id);
        }
    });
});

});

Hi yes, however I have just realised that by putting 'scrolled' inside 'onEnter' it only shows everytime the it enters the new slide. I need to access the 'scrolling(as you correctly suggested)' every time I scroll inside the 'onEnter' as I will need to animate a panel sliding from the right.

Varinder · Accepted Answer · 2014-01-29 11:01:54Z

I dont think you can pass variable name as an argument name to an anonymous function.

This is how you could approach it.

$(document).ready(function(){

var scrolled;
var $window = $(window);

function update() {
    scrolled = $window.scrollTop();
};



$('.color').each(function (i, scrolledItem) { // edit: changed "scrolled" to "scrolledItem"
    var position = $(this).position();

    $(this).scrollspy({
        // some code here
        onEnter: function (element, position) {
            // scrolled = $window.scrollTop();

             console.log( scrolled ); // hopefull should reference scrolled variable as there is no argument with the same name.

        },
        // some code here
    });
});

});

Collectives™ on Stack Overflow

js access variable value

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related