Rasoul 376 ارسال شده در اسفند 96 گزارش بازنشر ارسال شده در اسفند 96 سلام من میخواستم وقتی صفحه اسکرول میشه و هدر همراهش میاد پایین به هدر یه لگو مثلا اضافه بشه میدونم باید با جاوااسکریپ انجام بشه ولی من این زبان را تا این حد بلد نیستم ممنون میشم راهنماییم کنید. الان تو این دمو میخوام وقتی اسکرول میشه کنار My Header یک لوگو اضافه بشه و وقتی دوباره میبری بالا حذف بشه. دمو نقل قول لینک به ارسال
PRGAME 175 ارسال شده در اسفند 96 گزارش بازنشر ارسال شده در اسفند 96 با css هم میتونید این کار رو کنید . میتونید یه div بسازید برای لوگو و از این روش استفاده کنید که وقتی صفحه اسکرول نشده div کلاس x رو داشته باشه و وقتی صفحه اسکرول میشه کلاس y رو داشته باشه و توی کلاس ها با استفاده از opacity و display نمایش داده شدن لوگو رو کنترل کنید . 1 نقل قول لینک به ارسال
Rasoul 376 ارسال شده در اسفند 96 مالک گزارش بازنشر ارسال شده در اسفند 96 در 2 ساعت قبل، PRGAME گفته است : با css هم میتونید این کار رو کنید . میتونید یه div بسازید برای لوگو و از این روش استفاده کنید که وقتی صفحه اسکرول نشده div کلاس x رو داشته باشه و وقتی صفحه اسکرول میشه کلاس y رو داشته باشه و توی کلاس ها با استفاده از opacity و display نمایش داده شدن لوگو رو کنترل کنید . سلام درسته میدونم ولی من گفتم js بلد نستم اگه نمونه کدی چیزی دارید ممنون میشم نقل قول لینک به ارسال
j1989m 6 ارسال شده در اسفند 96 گزارش بازنشر ارسال شده در اسفند 96 در در 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 نقل قول لینک به ارسال
Rasoul 376 ارسال شده در اسفند 96 مالک گزارش بازنشر ارسال شده در اسفند 96 در ۱ ساعت قبل، 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/ نقل قول لینک به ارسال
j1989m 6 ارسال شده در اسفند 96 گزارش بازنشر ارسال شده در اسفند 96 در 20 ساعت قبل، Rasoul گفته است : سلام ممنون داداش فقط من برعکس این کدی که شما دادید را میخواستم یعنی اول لوگو نباشه بعدش موقع اسکرول لوگو باشه. جای block را none با عوض کردم فقط یه مشکلی داره برای اولین بار لوگو هست! اما اسکرول میکنی پایین و دوباره میبری تا هدر مشکلش حل میشه! نگاه کنید متوجه میشید https://jsfiddle.net/13bhs9e2/15/ سلام مجدد فقط کافیه توی استایل ها display لوگو رو none کنی: #logo { width: 200px; height: auto; float: left; display: none; } 2 نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .