آموزش طراحی Sticky Image در وبسایت

در این مقاله می آموزید که چطور با استفاده از CSS و Html تصویر ثابت ایجاد کنید.

تصویر ثابت

مثال :

img.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}
                <button></button>

مولفه position: sticky; بر اساس موقعیت اسکرول کردن صفحه توسط کاربر قرار میگیرد.

مولفه sticky ، بین relative و fixed متغیر است، بستگی به موقعیت اسکرول دارد. تا زمانیکه موقعیت افست در حال مشاهده باشد ، نمایان است و بعد در یک جا ثابت می ماند ( مانند position : fixed) .

توجه : مرورگر IE ، Edge 15 و ورژن های قدیمی آن نمی توانند این ویژگی ( قرار گیری در محل ثابت) را نمایش دهند . مرورگر سافاری نیاز به پیشوند webkit دارد ( به مثال زیر توجه کنید) . شما باید حداقل یکی از موارد top, right, bottom یا left را مقداردهی کنید تا قرارگیری در محل ثابت ، کارکند.

نمونه مثال Sticky Image:

<p><h2>Sticky Image: برای دیدن جلوه به پایین اسکرول کنید </h2><br>
<p>وقتی به موقعیا اسکرل رسیدید تصویر به صفحه ثابت می شود.</p><br>
<img class="sticky" src="http://articles.tahlildadeh.com/image.axd?picture=image_6346.png" alt="مهندس مصطفایی"><br>
<h2>Scroll Down</h2><br>
<p>چند متن مثال ..</p><br>
<p><b>برای اینکه موقعیت ثابت را ترک کرد دوباره به عقب اسکرول کنید</b></p><p>مهندس مصطفایی</p><br>
<p<br>
1.    دانش آموخته دوره روزانه مقطع کارشناسی رشته مهندسی صنایع – تولید صنعتی از دانشگاه امام حسین(ع) با معدل 16.31 (تاریخ اتمام تحصیلات: بهمن 1385)2.    دانش آموخته دوره روزانه مقطع کارشناسی ارشد مهندسی فناوری اطلاعات دانشگاه تربیت مدرس با معدل 18.76 (تاریخ دفاع از پایان نامه: شهریور 1395)•    تدریس دوره آموزش جامع پایتون در آموزشگاه تخصصی تحلیل داده•    تدریس دوره آموزشی جنگو در آموزشگاه تخصصی تحلیل داده•    تدریس دوره آموزشی یادگیری ماشین و داده کاوی با پایتون در آموزشگاه تخصصی تحلیل داده•    تدریس دوره تجزیه و تحلیل شی گرا (تحلیل و طراحی سیستم های نرم افزاری) با استفاده از UML در آموزشگاه تخصصی تحلیل داده</p>
 
<p>p></p>
<button></button>

امتحان کنید

خروجی Sticky Image

طراحی صفحه Meet The Team آموزش نحوه چرخاندن یک تصویر با CSS

1400/01/20 1858 4

سوالات و نظرات

نظرات شما