رفتن به مطلب

ساخت منو ثابت دارای اسکرول



با سلام 

برای ساخت همچین منویی ابتدا وارد این مسیر شوید 

پنل مدیریت > شخصی سازی > قالب ها

سپس از قسمت سمت چپ رو به روی قالب انجمن خود بر روی این گزینه کلیک کنید < / > تا وارد بخش تنظیمات کد ها شوید 

از سربرگ template ها  به دنبال این مسیر باشید 

 Core -> Front -> Global -> globatTamplate

پس با کمک کلید ترکیبی ctrl +f این عبارت را جست وجو کنید 

{template="includeJS" if="theme.js_include == 'footer'" app="core" group="global" location="global" params=""}

این کد را به زیر ان اضافه کنید 

	<script>
		    $('#elSearchNavContainer').addClass('original').clone().insertAfter('#elSearchNavContainer').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','2000').removeClass('original').hide();
		    $('.cloned #elSearch').remove();
		
		    $(document).ready(function() {
		        var stickyNavTop = $('#elSearchNavContainer').offset().top;
		
		        window.addEventListener("resize", clone);
		        function clone() {
		            var test = document.getElementById('elSearchNavContainer').offsetWidth;
		            $('.cloned').css('width',test);
		        }
		
		        var stickyNav = function(){
		            var scrollTop = $(window).scrollTop();
		
		            if (scrollTop > stickyNavTop) {
		                $('.cloned').css('display', 'inline');
		                $('.original').css('visibility', 'hidden');
		                $('.original #elSearch').appendTo('.cloned');
		            } else {
		                $('.cloned').css('display', 'none');
		                $('.original').css('visibility', 'visible');
		                $('.cloned #elSearch').appendTo('.original');
		            }
		        };
 
		        stickyNav(); clone();
		 
		        $(window).scroll(function() {
		            stickyNav();
		        });
		    });
		</script>

سپس ذخیره کنید 

کد ها باید به این شکل باشند 

rVFQwIF.png

نتیجه نهایی:

XP5qJSl.gif

موفق باشید


 گزارش این آموزش

×