محمد رضایی

مشکل در Siticky Menu

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

با سلام بنده یک Sticky Menu ایجاد کردم , ولی متاسفانه هیج افکنی نداره , میخوام یک افمت fade بهش بدم , از transition هم در css

استفاده کردن ولی کار نکرد ! چجوری باید افکت fade بهش بدم ؟

کد : جاوااسکریپت


<script language="javascript">
$(document).ready(function() {
$(document).scroll(function(){
x = $(document).scrollTop();
if ( x > 130 ) {
$(".menu").addClass("nav-fix");
}else{
$(".menu").removeClass("nav-fix");
}
});
});
</script>

کد Css :


.nav-fix{
position:fixed;
top:-40px;
z-index:100000;

}

0

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


لینک به پست

سلام می تونید از مدل های زیر استفاده کنید:

Fade in


$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});

div1 سریع نمایان میشه .. div2 با سرعت کم نمایان میشه و div3 در عرض 3000 میلی ثانیه نمایان میشه

fade out


$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});

div1 سریع محو میشه .. div2 با سرعت کم محو میشه و div3 در عرض 3000 میلی ثانیه محو میشه

3

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


لینک به پست

منم همین مشکل رو دارم.

با fadeIn درست نشد

0

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


لینک به پست

نشد ! ببینید این کد جاوا اسکریپت sticky menu منه ! حالا کجاش باید این fadein رو اضافه کنم ؟!


<script language="javascript">
$(document).ready(function() {
$(document).scroll(function(){
x = $(document).scrollTop();
if ( x > 130 ) {
$(".menu").addClass("nav-fix");
}else{
$(".menu").removeClass("nav-fix");
}
});
});
</script>

0

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


لینک به پست

کدتون اینجوری میشه :


<script language="javascript">
$(document).ready(function() {
$(document).scroll(function(){
x = $(document).scrollTop();
if ( x > 130 ) {
$(".menu").addClass("nav-fix");
$(".menu").fadeOut("slow");
}else{
$(".menu").removeClass("nav-fix");
$(".menu").fadeIn("slow");
}
});
});
</script>

2

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


لینک به پست

کدتون اینجوری میشه :


<script language="javascript">
$(document).ready(function() {
$(document).scroll(function(){
x = $(document).scrollTop();
if ( x > 130 ) {
$(".menu").addClass("nav-fix");
$(".menu").fadeOut("slow");
}else{
$(".menu").removeClass("nav-fix");
$(".menu").fadeIn("slow");
}
});
});
</script>

فکر کنم کد رو بر عکس دادید ! کد جوری عمل میکنه که وقتی منو sticky میشه بعد از 3 ثانیه fadeout میشه یعنی ناپدید میشه ! من میخوام بعد از 3 ثانیه fadein بشه !

0

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


لینک به پست

فکر کنم کد رو بر عکس دادید ! کد جوری عمل میکنه که وقتی منو sticky میشه بعد از 3 ثانیه fadeout میشه یعنی ناپدید میشه ! من میخوام بعد از 3 ثانیه fadein بشه !

تست کنید


<script language="javascript">
$(document).ready(function() {
$(document).scroll(function(){
x = $(document).scrollTop();
if ( x > 130 ) {
$(".menu").addClass("nav-fix");
$(".menu").fadeIn("slow");
}else{
$(".menu").removeClass("nav-fix");
$(".menu").fadeOut("slow");
}
});
});
</script>

2

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


لینک به پست

برای من کار نمیکنه !!!


$(document).scroll(function(){
x = $(document).scrollTop();
var w = $(document).width();
if ( x > 20 ) {
$("#nav-top").addClass("nav-top-fix");
$("#nav-top").fadeIn(5000);
}
else {
$("#nav-top").removeClass("nav-top-fix");
}
if ( x > 152 ) {
$("#nav-main").addClass("nav-main-fix");
$("#nav-main").fadeIn(10000);

if(w < 768) {
$("#nav-main").addClass("responsive-fix");
}
else {
$("#nav-main").removeClass("responsive-fix");
}
}
else {
$("#nav-main").removeClass("nav-main-fix");
}
});

0

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


لینک به پست

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

کتابخانه جی کوئری رو فراخوانی می کنید ؟

کدهای css و html رو هم پیوست کنید تا تست کنیم

0

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


لینک به پست

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

کتابخانه جی کوئری رو فراخوانی می کنید ؟

کدهای css و html رو هم پیوست کنید تا تست کنیم

جی کوئری به صفحه اضافه شده.

فقط در صورتی که fadeOut بعد از removeClass بذارم کار میکنه ، که منو بعد از این که کلاس remove میشه ، محو میشه ، در صورتی که من میخوام برگرده سرجاش

قالب رو لوکال هاست هستش.

ویرایش شده در توسط Ghasem Paran
0

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


لینک به پست

تست کنید


<script language="javascript">
$(document).ready(function() {
$(document).scroll(function(){
x = $(document).scrollTop();
if ( x > 130 ) {
$(".menu").addClass("nav-fix");
$(".menu").fadeIn("slow");
}else{
$(".menu").removeClass("nav-fix");
$(".menu").fadeOut("slow");
}
});
});
</script>

خیلی ممنون کار کردن ولی یک عیب بزرگ تر پیدا کرد :D وقتی که دوباره برمیگرده به حالت عادی fade میشه !

0

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


لینک به پست

اینو تست کنید


<script language="javascript">
$(document).ready(function() {
$(document).scroll(function(){
x = $(document).scrollTop();
if ( x > 130 ) {
$(".menu").addClass("nav-fix");
$(".menu").fadeIn("slow");
}else{
$(".menu").fadeOut("slow");
}
});
});
</script>

0

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


لینک به پست

هیچکدوم برای من کار نمیکنه.

استفاده از fadeOut باعث میشه منو مخفی بشه ، ما میخوایم برگرده سرجاش

0

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


لینک به پست

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

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

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

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


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

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

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


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