مشکل در Siticky Menu

[سئو فاکس 27]

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

}

[Farid 2281]

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

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

[Ghasem Paran 333]

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

با fadeIn درست نشد

[سئو فاکس 27]

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

[Farid 2281]

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

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

[سئو فاکس 27]

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

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

[Alireza Xn 1644]

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

[Ghasem Paran 333]

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

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

[Farid 2281]

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

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

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

[Ghasem Paran 333]

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

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

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

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

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

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

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

[سئو فاکس 27]

تست کنید

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

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

[Alireza Xn 1644]

اینو تست کنید

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

[Ghasem Paran 333]

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

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