رفتن به مطلب

ثابت ماندن موقعیت یک عنصر


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

سلام

من تو طراحی قالبی که اخیرا انجام دادم ، برای صفحه اصلی قالبم یه بردر در نظر گرفتم

و یه عنصر هم تعریف کردم و اون رو با استفاده از position:fixed به کناره بردر ثابت کردم با این هدف که میخوام اون عنصر روی بردر من به صورت ریلی با حرکت اسکرول متحرک بشه

خب؟

حالا مشکل من اینجاست که وقتی رو قالب زوم این یا زوم اوت میشه و یا با مانیتور های کوچک یا بزرگ قالب رو مشاهده میکنم این عنصر از موقعیت اصلیش خارج میشه

با توجه به این که دستور position:fixed نسبت به تگ body موقعیت خودشو میسنجه ، چه کار کنم که تحت هیچ شرایطی از جاش تکون نخوره و با اسکرول کردن هم حرکت کنه

عکس اون عنصر رو پیوست کردم

ممنون

post-813-0-69356600-1413209533_thumb.png

لینک به ارسال

خب اینطوری که میچسبه به بالاب سمت چپ صفحه

من میخوام به صورت ریلی روی بردر حرکت کنه و هیچ تغییری نکنه

چه با مانیتور های بزرگ و کوچک و چه با زوم این و زوم اوت کردن

آدرس آنلاین

http://www.yaranenamaz.com

لینک به ارسال

من دقیقا متوجه نمونه ای که زحمتش رو کشیدید نشدم!

چون هیچ عکسی لود نشده

آیا اون کد های جاوا اسکریپت هم تاثیر داره؟

شما از position: absolute; ؟!

میشه یکم توضیح بدید

ممنون

لینک به ارسال

والا من که چیزی نمیبینم :D

خب مهم نیست

بی زحمت شما بنده رو راهنمایی کنید که چطور همین بلا رو سر سایت خودم بیارم

سپاس

;)

لینک به ارسال
والا من که چیزی نمیبینم :D خب مهم نیست بی زحمت شما بنده رو راهنمایی کنید که چطور همین بلا رو سر سایت خودم بیارم سپاس ;)

عزیزم جوابت رو که دادن!

برای اینکار نیاز به جاوااسکریپت هم داری که توی همین لینک نوشتش

به عنصرت id="aerobot" بده و فایل یه کلاس هم که بازم توی همون لینک هست بده کارت حل میشه.

لینک به ارسال

منظور شما این نتیجه هست؟!!!

دقیقا کدهای شما رو استفاده کردم تو این کد

بررسی بفرمایید

عکسش رو عوض کردم و پیوست کردم


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>scroll</title>
<script>
var img = document.getElementById("aerobot");
window.onscroll = function () {
var bodyHeight = parseInt(getComputedStyle(document.body).height, 10);
var scrollLimit = bodyHeight - window.innerHeight;
var scrollTop = document.body.scrollTop;
var scrollPCT = (scrollTop / (scrollLimit / 100)) / 100;
img.style.top = bodyHeight * scrollPCT - img.offsetHeight + "px";
}
</script>
<style>
body {
height: 900px;
margin: 0;
padding: 0;
}
img {
width: 500px;
height: 500px;
position: absolute;
top: -50px;
right: 0;
}
</style>
</head>
<body>
<img id="aerobot" src="no photo.png" />
</body>
</html>

post-813-0-87914100-1413487135_thumb.png

ویرایش شده توسط shayan
لینک به ارسال

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

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

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

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

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

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

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

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

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