Code Library

Keep element in view while scrolling using Prototype

For Example: <div id="element">hello world</div>

//save old position
	var oldLayout = fixedMap.getLayout();
	var oldPosition = fixedMap.getStyle('position');
	var oldTop = oldLayout.get('top');
	var oldLeft = oldLayout.get('left');
	var oldHeight = oldLayout.get('height'); //getHeight();
	var oldWidth = oldLayout.get('width'); //getWidth();
	
	var hiddenDiv = new Element('div', {'style': 'position: absolute; visibility: hidden'});
	hiddenDiv.clonePosition(fixedMap);
	
	var pseudoDiv = new Element('div', {'style': 'position: absolute;'});
	pseudoDiv.clonePosition(fixedMap, {'offsetLeft': 10, 'offsetTop': -4});
	
	mapIsFixed = false;
	
	Event.observe(window, 'scroll', function() {
		var dOffset = document.viewport.getScrollOffsets();
		var top = fixedMap.viewportOffset().top;
		var left = fixedMap.viewportOffset().left;
		
		if(mapIsFixed == false && top <= 0){
			fixedMap.insert({before: pseudoDiv});
		
			fixedMap.setStyle({
				position: 'fixed',
				top: '0px',
				left: left+'px'
			});
			mapIsFixed = true;
			
		}else if(pseudoDiv.viewportOffset().top > 0)
		{	
			fixedMap.setStyle({
				position: 'relative',
				top: '',
				left: ''
			});
			mapIsFixed = false;
			
		}
		
	});
	
});
</script>