Clashbaz

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

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

سلام.

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

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

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

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

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

0

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


لینک به پست

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

0

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


لینک به پست

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

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

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

0

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


لینک به پست

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

 

این یه نمونشه

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

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


لینک به پست

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

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

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

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


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

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

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


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