افزونه اسکرول منوی بالا

[arshialove 28]

سلام. افزونه یا کدی میخام که بتونم فهرست های ناوبری بالای سایتم به پایین که میای اونها هم همراه با پایین اومدن بیان پایین.

توی قالب قبلیم داشت ولی این قالبم این امکان رو نداره

[graphicno 77]

با سلام

بیاین یه کلاس جدید ایجاد کنید به عنوان مثال :

.sticky-header{
position: fixed;
top: 60px;
}

بعدش با استفاده از جاوا اسکریپت :

if ( $('body.sticky-header').length )
{
  $(window).on('scroll', function() {
   var winH = $(window).scrollTop();
   var $pageHeader = $('.page-menu');
   if ( winH > 60 ) {
    $pageHeader.addClass('sticky');
   }
   else
   {
    $pageHeader.removeClass('sticky');
   }
  });
}

بهش بگید وقتی اسکرول از این اندازه بیشتر پایین اومد کلاس sticky-header رو به منو اضافه کن که در کد جاوا کلاس مربوط به منو page-menu است.

این ها همه مثال بود شما باید کلاس ها و آی دی ها رو مطابق با قالب خودتون ست کنید

[arshialove 28]

مرسی داداش ولی من نفهمیدم.یه طوری بگو بتونم اجراش کنم..اونقدر حرفه ای نیستم

[graphicno 77]

سلام

تو فایل css یه کلاس ایجاد کن

.sticky-menu{
position: fixed;
}

بعدش تو قسمت کد های جاوا قالب کد زیر رو اضافه کن :

if ( $('body').length )
{
  $(window).on('scroll', function() {
   var height = $(window).scrollTop();
   var $pageHeader = $('.header');
   if ( height > 60 ) {
	    $pageHeader.addClass('sticky-menu');
   }
   else
   {
	    $pageHeader.removeClass('sticky-menu');
   }
  });
}

بعد از انجام این کار ها به بخش

<header class="header">

پس از اسکرول کردن به اندازه 60px کلاس sticky-menu اضافه میشه که در css این کلاس رو با خاصیت position: fixed تعریف کردین که در این حالت منو قالب همراه با اسکرول کردن به پایین میاد

[arshialove 28]

داداش ممنون از زحمتت.من حرفه ای نیستم بتونم این کارها رو انجام بدم.اگر راه ساده ای در حد مبتدی یا افزونه ای سراغ داری بگو.شرمنده

[graphicno 77]

سلام مجدد

تو فایل css قالب ( style.css ) کلاس :

.nav-primary {width:100%;height:50px;background:#39343A;border-bottom:3px solid #7F7582;margin:0px;padding:5px;}

به این

.nav-primary { position:fixed; width:100%;height:50px;background:#39343A;border-bottom:3px solid #7F7582;margin:0px;padding:5px;}

تغییر بدید

[arshialove 28]

سلام مجدد

تو فایل css قالب ( style.css ) کلاس :

.nav-primary {width:100%;height:50px;background:#39343A;border-bottom:3px solid #7F7582;margin:0px;padding:5px;}

به این

.nav-primary { position:fixed; width:100%;height:50px;background:#39343A;border-bottom:3px solid #7F7582;margin:0px;padding:5px;}

تغییر بدید

داداش ممنون از زحمتت..

درست شد