رفتن به مطلب

مشکل در Siticky Menu


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

با سلام بنده یک 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;

}

لینک به ارسال

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

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 میلی ثانیه محو میشه

لینک به ارسال

نشد ! ببینید این کد جاوا اسکریپت 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>

لینک به ارسال

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


<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>

لینک به ارسال

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


<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 بشه !

لینک به ارسال

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

لینک به ارسال

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


$(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");
}
});

لینک به ارسال

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

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

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

لینک به ارسال

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

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

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

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

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

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

ویرایش شده توسط Ghasem Paran
لینک به ارسال

تست کنید


<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 میشه !

لینک به ارسال

اینو تست کنید


<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>

لینک به ارسال

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

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

لینک به ارسال

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

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

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

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

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

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

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

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

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