Version 3 of Xtreme introduced fixed menus, as well as Fix to Top on scroll options for both Primary and Secondary menu bars.   The tutorial below shows you how to use a provided script to fix to Top on Scroll anything else you like, such as - Extra Menu (using the "Plus" Extra Menu shortcode) - HTML Insertion area or any theme Area with the "plus" Classes box - Your own content <div> First you will put the script provided down below in the Post Footer HTML Insertion area found in: Customizer: Added Content > Footer > Footer HTML Box Legacy Admin: Advanced Options > HTML Insertion > Post Footer code box Then, to fix an element on scroll, you just need to give it the class wvrx-scrollfix   Notes: - If you have other fixed areas, like HTML Insertion fixed top, or fixed header widget area, or fixed menus (including fixed to top on scroll), your custom fixed to top on scroll ares will fix below them - The Script will only fix the first area using the class. It could be made to fix more, if needed, inquire on the Support Forum   1) To fix an Extra_menu Add the class option in the Extra_menu shortcode like for example [extra_menu menu_type="standard" menu_style="primary" menu_name="YourCustomMenuName" class="wvrx-scrollfix"]

2) To fix Theme Areas If you have the "Plus" plugin, many of the theme areas have a classes box, including all the HTML Insertion areas. By typing the class name wvrx-scrollfix in that box, you will make that area fix on scroll.

3) To fix your own content <div> You can use the same method with your own <div> elements by adding the class to it as shown below <div class="wvrx-scrollfix">Your content </div>
IMPORTANT: To fix your area, the script will add a class wvrx-fixonscroll to it when it reaches the top, at that point your area will inherit all the fixed styling of that class, which will includes giving it the width of the wrapper and the fixed position.   The script accounts for wrapper and header padding, but if your area is outside of the header area, or if it has parents with paddings, when the Browser is larger than the Wrapper, it may end up shifted horizontally. If so, you will need to add a Custom CSS rule to the theme Global Custom CSS Rule box, with negative margins, to bring it in line with the wrapper edges. In the CSS below, the value XXX for margins can take several forms. - If all parents paddings are in pixel, a pixel value, total of all parents' pixel paddings like: -38px - If the Padding of all parents are %, a Percentage value, total of all parents' paddings like: -5% - If some parents have pixel padding and some % you would need to use the CSS calc function like: calc(-1 * (10px + 3%)) - Make sure to have spaces before and after operators.

.wvrx-scrollfix.wvrx-fixonscroll {margin: 0 -XXXpx;}

Notes: - If Left and Right paddings are different, you will need to use the margin 4 values syntax: margin:top right bottom left; like: margin: 0 -20px 0 -15px; - If your site has been made full screen globally by either setting a very large width, or using the Full Width > Entire Site Full Width option, you will not need to apply a negative margin, as the browser does not get larger than the wrapper.

4) Animating and styling the transition If you want to change / animate the styling of the area when it gets fixed, read the other Guide Article below

“Fixed to Top on Scroll” Menus: Customization

Find below the script to paste in the Post Footer content box Location is found in: Customizer: Added Content > Footer > Footer HTML Box Legacy Admin: Advanced Options > HTML Insertion > Post Footer code box

<script type="text/javascript">
//Fix on scroll any Area using the wvrx-scrollfix class
//For an extra menu, simply add the class to the extra menu using the shortcode class options
//For any other area, just add the class to the container
//This will only fix the first area with the class, Could be extended to more than one
//*** If area is not in the header, and header has padding it will require a custom CSS rule for proper positionning when fixed
//*** If an existing menu is fixed on scroll, it will require a Custom CSS rule for the top position when fixed
var areaSelector = ".wvrx-scrollfix:first"; //!!Select ONLY the first area with the class
if (jQuery(areaSelector)) {
	//This creates an empty div above the area to be used as the Fixing reference position
	jQuery( '<div class="wvrx-scrollfix-ref"></div>' ).insertBefore( areaSelector );
	jQuery(window).scroll(function() {
		var wvrxAdminOffset = 0; //initialize offset for admin bar
		var wvrxFixedOffset = 0;
		var areaHeight = jQuery(areaSelector).outerHeight(); //Gathers the primary height
		// Get the height of the WP Admin bar if present.
		if (jQuery('.admin-bar').length) {
			wvrxAdminOffset = jQuery('#wpadminbar').outerHeight();
		}
		// Check if there are other fixed areas, if so add offset
		jQuery('.wvrx-fixedtop, .wvrx-fixonscroll:not(.wvrx-scrollfix)').each(function () {			
			wvrxFixedOffset = wvrxFixedOffset + jQuery(this).outerHeight();
		});
		wvrxAdminOffset = wvrxAdminOffset + wvrxFixedOffset;
		var windowScroll = jQuery(window).scrollTop(); //Collects the amount of scroll
		//Computes scroll trigger position based on the wvrx-scrollfix-ref div inserted at the beginning
		var areaPos = jQuery('.wvrx-scrollfix-ref').offset().top - parseFloat(jQuery('body').css('marginTop')) + wvrxFixedOffset;

		if (areaPos < (windowScroll + wvrxAdminOffset)) {
			jQuery(areaSelector).addClass('wvrx-fixonscroll'); //Fix primary
			jQuery('body').css('margin-top', areaHeight + wvrxFixedOffset); //Add body ossfet to compensate for Area fix
			jQuery(areaSelector).css('top', wvrxAdminOffset + 'px'); //change Area top
		} else {
			jQuery(areaSelector).removeClass('wvrx-fixonscroll'); //Unfix Area
			jQuery('body').css('margin-top', wvrxFixedOffset); //Remove Body offset as nothing is fixed
			jQuery(areaSelector).css('top', ''); //remove Area top
		}
    });
};
</script>