Sticky header effect for mobile device is a bad idea. It is occupying the extra spaces and visitors are not getting the much spaces for reading the content. But some user are wanting this effect for some sites. This tutorial will help them. I did following logic:

1. Getting sticky header on up scroll
2. Hiding it on down scroll

Adds the Custom CSS

This custom CSS will make the sticky header and add the nice animation effect when header will appear/disappear. Open the style.css of your child theme and add this new snippet there.

CSS of Sticky Header

/* Sticky Header on Mobile Device
--------------------------------------------------- */
@media (max-width: 991px){
	.fl-theme-builder-header header.fl-builder-content,
	header.fl-page-header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;

		will-change: transform;
		-webkit-transition: transform 0.5s linear;
		-moz-transition: transform 0.5s linear;
		transition: transform 0.5s linear;
	}

	.scroll-up {
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		transform: translateY(0%);
	}

	.scroll-down {	
		-webkit-transform: translateY(-100%);
		-moz-transform: translateY(-100%);
		transform: translateY(-100%);
	}
}

@media (min-width: 768px){
	body.admin-bar header.fl-builder-content,
	body.admin-bar header.fl-page-header {
		top: 32px!important;
	}
}

@media (max-width: 767px){
	body.admin-bar header.fl-builder-content,
	body.admin-bar header.fl-page-header {
		top: 46px!important;
	}
}

Creates New JS File & Enqueue It

Creates a new JS file “sticky-header-mobile.js” and put into the child theme’s “js” folder. Here is the full code of this JS file:

Sticky Header JS file

(function($){

	StickHeaderMobile = {
		init: function()
		{
			this._bind();
		},

		_bind: function()
		{
			if( $('.fl-theme-builder-header').length != 0 )
			{
				this._headerElem = $('header.fl-builder-content');

				if( $(window).width() <= 991 )
					this._hdScroll();

				$(window).resize(function(){
					StickHeaderMobile._onWindowResize();
				});
			}

			if( $('.fl-page-header').length != 0 )
			{
				this._headerElem = $('header.fl-page-header');

				if( $(window).width() <= 991 )
					this._hdScroll();

				$(window).resize(function(){
					StickHeaderMobile._onWindowResize();
				});
			}
		},

		_hdScroll: function()
		{
			var headerH 		= StickHeaderMobile._headerElem.height();
			var lastScrollTop 	= headerH;

			$('.fl-page').css({'margin-top': headerH});
			StickHeaderMobile._headerElem.addClass('scroll-up');

			$(window).on('scroll', function(event){
				var st = $(this).scrollTop();
				if (st > lastScrollTop){
					// downscroll code
					StickHeaderMobile._headerElem.addClass('scroll-down');
					StickHeaderMobile._headerElem.removeClass('scroll-up');
				} else {
					// upscroll code
					StickHeaderMobile._headerElem.removeClass('scroll-down');
					StickHeaderMobile._headerElem.addClass('scroll-up');
				}
				lastScrollTop = ( st <= headerH ) ? headerH : st;
			});
		},

		_onWindowResize: function()
		{
			if( $(window).width() <= 991 )
			{
				this._hdScroll();
			} else {
				$('.fl-page').css({'margin-top': '0'});
			}
		}
	};

	$(function(){
		StickHeaderMobile.init();
	});

})(jQuery);

Now open the functions.php file and add this snippets at end of the file. It is loading the new js file on your site.
Enqueue the JS file

add_action( 'wp_enqueue_scripts', 'frame_sticky_header_mobile', 1007 );
function frame_sticky_header_mobile()
{
	wp_enqueue_script( 'sticky-header-mobile', get_stylesheet_directory_uri() . '/js/sticky-header-mobile.js', array(), '1.6.1', true );
}