arshialove

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

7 پست در این موضوع قرار دارد

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

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

0

به اشتراک گذاری این پست


لینک به پست

با سلام

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


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

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

2

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


لینک به پست

سلام

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

2

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


لینک به پست

سلام مجدد

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

تغییر بدید

1

به اشتراک گذاری این پست


لینک به پست

سلام مجدد

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

تغییر بدید

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

درست شد

1

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری