Rasoul

جاوااسکریپت
اضافه شدن لوگو هنگام اسکرول هدر

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

سلام

من میخواستم وقتی صفحه اسکرول میشه و هدر همراهش میاد پایین به هدر یه لگو مثلا اضافه بشه میدونم باید با جاوااسکریپ انجام بشه ولی من این زبان را تا این حد بلد نیستم ممنون میشم راهنماییم کنید.

الان تو این دمو میخوام وقتی اسکرول میشه کنار My Header یک لوگو اضافه بشه و وقتی دوباره میبری بالا حذف بشه.

 

دمو

0

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


لینک به پست

با css هم میتونید این کار رو کنید . 

میتونید یه div بسازید برای لوگو و از این روش استفاده کنید که وقتی صفحه اسکرول نشده div کلاس x رو داشته باشه و وقتی صفحه اسکرول میشه کلاس y رو داشته باشه  و توی کلاس ها با استفاده از opacity و display نمایش داده شدن لوگو رو کنترل کنید .

 

1

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


لینک به پست
در 2 ساعت قبل، PRGAME گفته است :

با css هم میتونید این کار رو کنید . 

میتونید یه div بسازید برای لوگو و از این روش استفاده کنید که وقتی صفحه اسکرول نشده div کلاس x رو داشته باشه و وقتی صفحه اسکرول میشه کلاس y رو داشته باشه  و توی کلاس ها با استفاده از opacity و display نمایش داده شدن لوگو رو کنترل کنید .

 

سلام درسته میدونم ولی من گفتم js بلد نستم اگه نمونه کدی چیزی دارید ممنون میشم

0

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


لینک به پست
در در 3/5/2018 at 13:25، Rasoul گفته است :

سلام

من میخواستم وقتی صفحه اسکرول میشه و هدر همراهش میاد پایین به هدر یه لگو مثلا اضافه بشه میدونم باید با جاوااسکریپ انجام بشه ولی من این زبان را تا این حد بلد نیستم ممنون میشم راهنماییم کنید.

الان تو این دمو میخوام وقتی اسکرول میشه کنار My Header یک لوگو اضافه بشه و وقتی دوباره میبری بالا حذف بشه.

 

دمو

سلام

 

کد زیر رو قبل از <h2>My Header</h2> قرار بده:

<img id="logo" src="http://forum.wp-parsi.com/uploads/monthly_2017_04/1.png.843566f3bac6049941a67d225d8f91f8.png">

کد اضافه شده css:


#logo {
  width: 200px;
  height: auto;
  float: left;
}

کدهای javascript:

window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    header.classList.add("sticky");
    document.getElementById("logo").style.display= "none";
  } else {
    header.classList.remove("sticky");
    document.getElementById("logo").style.display= "block";
  }
}

 

2

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


لینک به پست
در ۱ ساعت قبل، j1989m گفته است :

سلام

 

کد زیر رو قبل از <h2>My Header</h2> قرار بده:


<img id="logo" src="http://forum.wp-parsi.com/uploads/monthly_2017_04/1.png.843566f3bac6049941a67d225d8f91f8.png">

کد اضافه شده css:



#logo {
  width: 200px;
  height: auto;
  float: left;
}

کدهای javascript:


window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    header.classList.add("sticky");
    document.getElementById("logo").style.display= "none";
  } else {
    header.classList.remove("sticky");
    document.getElementById("logo").style.display= "block";
  }
}

 

 

سلام

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

جای  block را none با عوض کردم فقط یه مشکلی داره برای اولین بار لوگو هست! اما اسکرول میکنی پایین و دوباره میبری تا هدر مشکلش حل میشه!

نگاه کنید متوجه میشید

https://jsfiddle.net/13bhs9e2/15/

0

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


لینک به پست
در 20 ساعت قبل، Rasoul گفته است :

 

سلام

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

جای  block را none با عوض کردم فقط یه مشکلی داره برای اولین بار لوگو هست! اما اسکرول میکنی پایین و دوباره میبری تا هدر مشکلش حل میشه!

نگاه کنید متوجه میشید

https://jsfiddle.net/13bhs9e2/15/

سلام مجدد

فقط کافیه توی استایل ها display لوگو رو none کنی:

#logo {
  width: 200px;
  height: auto;
  float: left;
  display: none;
}

 

2

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط jistili1
      سلام دوستان.من اومدم به قول خودم سایتم رو با استفاده از دستور های media query در css ریسپانسیو کردم.سایتم اینه:namavaz.ir.اومدم برای سایز های مختلف device سایت رو تعریف کردم.ولی الان وقتی سایت رو باز میکنید اصلا کاری به مدیاکوئری ها نداره.همون صفحه ای که روی لپتاپم میاره رو روی موبایل میاد زوم بک میکنه.اگه سایز مرورگر رو توی لپتاپ تغییر بدم مدیاکوئری ها کار میکنن ولی روی موبایل مشکل داره.ممنون میشم راهنمائیم کنید.
    • توسط یوسف کهندل
      سلام میشه فایل اچ تی ام ال رو داخل هاست قرار داد و کار کند یعنی ای اس پی دات نت یا زبان برنامه نویسی نباشد
       
    • توسط Ali Brm
      سلام خدمت دوستان
      توی قسمت‌های مختلف وردپرس و توی قالب بخشی وجود داره که میشه کلاس CSS یا ID اون رو اضافه کرد. من با کلاس‌ها و ID آشنایی دارم ولی نمی‌دونم چه جوری باید از اون استفاده کرد. اگه امکانش هست یه توضیح با یک مثال بفرمایید.
      ممنون

    • توسط Ali Brm
      سلام دوستان
      بعضی افزونه‌ها میتونن به صورت گرافیکی یا دستی بیان و ظاهر سایت رو تغییر بدن. مثلا با افزونه مداد زرد میشه کلی توی کد ظاهری سایت دست برد.
      من خودم به CSS و HTML آشنایی دارم ولی سوالی که برام پیش میاد اینه که افزونه ای مانند مداد زرد کدهای CSSاش رو کجا مینویسه
      یه مثال کوچیک بزنم. مثلا اگه دستی برم توی کدهای قالبم و دستی روی فایلش یه تغییری ایجاد کنم خب تغییر اعمال میشه ولی وقتی میرم تنظیمات قالب توی وردپرس و ذخیره تنظیمات رو میزنم همه کدهایی که دستی وارد کردم همه میپره. دلیلش رو میدونم اینه که خب کدهای برنامه نویسی این کدها را میسازند برای همین وقتی "ذخیره تنظیمات" زده میشه همه کدها از اول نوشته میشن (تا حدودی)
      ولی سوالم اینه که چرا مداد زرد یا Visual Composer این اتفاق براش نمیوفته. ینی کدهاش رو کجا می‌نویسه که باقی می‌مونه؟