Current Code (but doesn't run as it seem it would).
$(window).scroll(function() {
if ($(this).scrollTop() > 1100) {
Problem.
The above looks it's supposed to work; but rather doesn't read the scroll position as you think it would, instead it fires anytime any scroll position is touched. So when the user scrolls at all it loads (my chart.js animation) - each time refreshing the animation after main scroll bar is adjusted the slightest.
Requirement.
I'm seeking to measure the height from the top or bottom of the page to detect scroll position or even using an anchor link > and once the specified scroll position is reached, then the animation loads, one time and stays as is at completion of animation. I have seen many posts on this but with no real solutions.
Recent Update.
I have tried both suggestions; with my chart.js animation script within these suggested calls but the same problem appears -- the animation refreshes and ques at every instance of touching the scroll bar.
var breakpoint = false;
$(window).scroll(function() {
if ($(this).scrollTop() > 400 && !breakpoint ) {
// do stuff
// $(window).scroll(function() {
// if ($(this).scrollTop() > 1100) {
// $(function () {
// $(document).ready(function () {
var chart = null;
var colors = Highcharts.getOptions().colors,
categories = ['Home', 'Own', 'Shop', 'Buy'],
name = 'Browser brands',
data = [{
// y: 55.11,
// color: colors[0],
// drilldown: {
// name: 'MSIE versions',
// categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
// data: [10.85, 7.35, 33.06, 2.81],
// color: colors[0]
// }
// }, {
y: 21.63,
color: colors[1],
drilldown: {
name: 'Buy',
// categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
data: [0.20, 0.83, 1.58, 13.12, 5.43],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
name: 'Shop',
// categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
// 'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
name: 'Own',
// categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
// 'Safari 3.1', 'Safari 4.1'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Home',
// categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
data: [0.12, 0.37, 1.65],
color: colors[4]
}
}];
// Build the data array
var browserData = [];
for (var i = 0; i < data.length; i++) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
}
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
text: null
},
series: [{
name: 'Hot Links',
data: browserData,
innerSize: '30%'
}],
tooltip: {
valueSuffix: '%',
positioner: function () {
return {
x: this.chart.series[0].center[0] - (this.label.width / 2) + 8,
y: this.chart.series[0].center[1] - (this.label.height / 2) + 8
};
}
},
plotOptions: {
pie: {
cursor: 'pointer',
dataLabels: {
connectorColor: 'white'
},
point: {
events: {
mouseOver: function () {
if (!this.connector.dynamicConnector) {
var width = 16,
height = 24;
// Extract the connector start position
var dArr = this.connector.d.split(' ');
var startY = dArr.pop(),
startX = dArr.pop();
var start = [parseFloat(startX), parseFloat(startY)];
// Construct the triangle
var path = 'M ' + start[0] + ' ' + start[1] + 'L ' + (start[0] + height) + ' ' + (start[1] - (width / 2)) + ' L ' + (start[0] + height) + ' ' + (start[1] + (width / 2)) + ' L ' + start[0] + ' ' + start[1];
// Convert the section angle from radian to degree and apply to the trangle
// Setup rotation, x, y required by the updateTransform method
this.connector.rotation = (this.angle * 180) / Math.PI;
this.connector.x = startX;
this.connector.y = startY;
this.connector.updateTransform();
this.connector.attr('stroke', this.color);
this.connector.attr('fill', Highcharts.Color(this.color).brighten(0.2).get());
this.connector.attr('d', path);
this.connector.dynamicConnector = true;
}
this.connector.show();
},
mouseOut: function () {
this.connector.hide();
}
}
}
}
}
});
// });
// });
}
});
Control it with a higher scoped boolean
var breakpoint = false;
$(window).scroll(function() {
if ($(this).scrollTop() > 400 && !breakpoint ) {
doStuff();
}
if ($(this).scrollTop() < 400 && breakpoint ) {
doOtherStuff();
}
})
function doStuff() {
breakpoint = true;
console.log('we passed the breakpoint, do stuff');
}
function doOtherStuff() {
breakpoint = false;
console.log('were above the breakpoint, do other stuff');
}
EDIT Added the converse functionality as well for coming back above the breakpoint.