رفتن به مطلب
Clashbaz

مشکل در sticky المان

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

سلام.

من برای سایت یه هدر دارم که ارتفاع هدر تغییر میکنه. یعنی با اسکرول کردن ارتفاعش تغییر می کنه.حالا کوچکتر با بزرگتر.

حالا می خوام وقتی سایت رو اسکرول می کنم و هدر میاد پایین، به هدر بچسبه

من از پلاگین های sticky استفاده کردم. اما باید بهش یه padding-top بدیم و از اونجایی که هدر در صفحات مختلف دارای ارتفاع مختلف هست، نمیشه یه padding ثابت داد و بین سایدبار و هدر فاصله میافته.

ممنون میشم کمک کنید

یعنی یه جورایی این padding-top دینامیک محاسبه بشه.بر اساس ارتفاع هدر

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


لینک به ارسال

من درست متوجه منظورتون نشدم ولی اگر یه سربرگ چسبنده می خواید به کلاس یا ایدی سربرگتون position:fixed رو اضافه کنید و همچنین top:0 بازم اگه مشکلتون حل نشده بیشتر توضیح بدید

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


لینک به ارسال

فکر کنم اینطوری بگم بهتره.

میخوام وقتی اسکرول به پایین می کنم، وقتی هدر به سایدبار رسید، سایدبار هم stick بشه. وقتی هم اسکرول به بالا می کنم، سایدبار به نقطه اولش که برگشت، از حالت stick رها بشه.

یعنی برای سایدبار نقطه تعریف کنیم یه جورایی که هنگام اسکرول به پایین مثلا اگر فلان آی دی یا کلاس، بهش نزدیک شد یا فاصلش مثلا صفر شد، سایدبار stick بشه ( به هدر بچسبه مثلا ) و برعکس، هنگام اسکرول به بالا، وقتی سایدبار به بالا ترین نقطه خودش که حالت اولیه هست رسید از حالت stick رها بشه

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


لینک به ارسال

اینکار با جاوا شدنیه متاسفانه الان با گوشی هستم که تایپ کنم براتون  شما همون خاصیت fixed رو برای سربرگ انجام بدید و برای sidebar هم یک کد جاوا تعریف کنید که وقتی مثال اسکرول کردن به 100pxرسید یک کلاس به کلاس sidebar اضافه شه و وقتی اسکرول کمتر از 100px بود کلاس حذف بشه ، توی گوگل سرچ کنید موجود هست،برای اون کلاس جدیدتون هم خاصیت fixed و top رو مثال 80px و right:0 ، 

 

این یه نمونشه

ویرایش شده توسط asadiy4n

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


لینک به ارسال

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

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

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

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

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

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

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

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


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