رفتن به مطلب

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


پست های پیشنهاد شده

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

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

لینک به ارسال

با سلام

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


.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 است.

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

لینک به ارسال

سلام

تو فایل 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 تعریف کردین که در این حالت منو قالب همراه با اسکرول کردن به پایین میاد

لینک به ارسال

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

لینک به ارسال

سلام مجدد

تو فایل 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;}

تغییر بدید

لینک به ارسال

سلام مجدد

تو فایل 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;}

تغییر بدید

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

درست شد

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...