Reputation: 5771
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
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
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