آموزش طراحی Sticky Image در وبسایت
در این مقاله می آموزید که چطور با استفاده از CSS و Html تصویر ثابت ایجاد کنید.
تصویر ثابت
مثال :
img.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
مولفه position: sticky; بر اساس موقعیت اسکرول کردن صفحه توسط کاربر قرار میگیرد.
مولفه sticky ، بین relative و fixed متغیر است، بستگی به موقعیت اسکرول دارد. تا زمانیکه موقعیت افست در حال مشاهده باشد ، نمایان است و بعد در یک جا ثابت می ماند ( مانند position : fixed) .
توجه : مرورگر IE ، Edge 15 و ورژن های قدیمی آن نمی توانند این ویژگی ( قرار گیری در محل ثابت) را نمایش دهند . مرورگر سافاری نیاز به پیشوند webkit دارد ( به مثال زیر توجه کنید) . شما باید حداقل یکی از موارد top, right, bottom یا left را مقداردهی کنید تا قرارگیری در محل ثابت ، کارکند.
نمونه مثال Sticky Image:
<h2>Sticky Image: برای دیدن جلوه به پایین اسکرول کنید </h2>
<p>وقتی به موقعیا اسکرل رسیدید تصویر به صفحه ثابت می شود.</p>
<img class="sticky" src="http://articles.tahlildadeh.com/image.axd?picture=image_6346.png" alt="مهندس مصطفایی">
<h2>Scroll Down</h2>
<p>چند متن مثال ..</p>
<p><b>برای اینکه موقعیت ثابت را ترک کرد دوباره به عقب اسکرول کنید</b></p><p>مهندس مصطفایی</p>
<p
1. دانش آموخته دوره روزانه مقطع کارشناسی رشته مهندسی صنایع – تولید صنعتی از دانشگاه امام حسین(ع) با معدل 16.31 (تاریخ اتمام تحصیلات: بهمن 1385)2. دانش آموخته دوره روزانه مقطع کارشناسی ارشد مهندسی فناوری اطلاعات دانشگاه تربیت مدرس با معدل 18.76 (تاریخ دفاع از پایان نامه: شهریور 1395)• تدریس دوره آموزش جامع پایتون در آموزشگاه تخصصی تحلیل داده• تدریس دوره آموزشی جنگو در آموزشگاه تخصصی تحلیل داده• تدریس دوره آموزشی یادگیری ماشین و داده کاوی با پایتون در آموزشگاه تخصصی تحلیل داده• تدریس دوره تجزیه و تحلیل شی گرا (تحلیل و طراحی سیستم های نرم افزاری) با استفاده از UML در آموزشگاه تخصصی تحلیل دادهp>
خروجی Sticky Image
