CODEWITHSUNDEEP
javascriptjquery
Aessandro
Aessandro

Reputation: 5771

js access variable value

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);
            }
        });
    });
});

Upvotes: 0

Views: 63

Answers (2)

Varinder
Varinder

Reputation: 2664

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
    });
});

});

Upvotes: 0

Chris Dixon
Chris Dixon

Reputation: 9167

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);
        }
    });
});

});

Upvotes: 1

Related Questions