Custom Sticky logic when the native stick-top can't work

There are a number of reasons why the CSS position: sticky property might not work such as browser compatibility, ancestor element has OVERFLOW property set, height is not set on parent element, or parent element is a flexbox.
JavaScript • JQuery

Call the following javascript and jQuery when the DOM is ready.

	/* Custom sticky top for aircraft info */
	var $window = $(window);
	var distance = $('.targetobject').offset().top;
	$window.scroll(function() {
	    		if ( $window.scrollTop() >= distance ) {	
				$('.targetobject').css({
    					'top': $(this).scrollTop() - distance
				});
	    		}else{
				$('.targetobject').css({
    					'top': 0
				});
			}
	});

CSS

.targetobject { position:absolute; }

Written by fbrefere001

Posted by fbrefere001 on Wednesday June 9, 2021