رفتن به مطلب

اضافه شدن لوگو هنگام اسکرول هدر


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

سلام

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

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

 

دمو

لینک به ارسال

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

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

 

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

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

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

 

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

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

 

لینک به ارسال
در ۱ ساعت قبل، 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/

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

 

سلام

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

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

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

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

سلام مجدد

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

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

 

لینک به ارسال

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

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

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

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

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

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

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

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

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