shayan

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

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

سلام

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

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

خب؟

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

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

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

ممنون

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

0

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


لینک به پست

سلام

top و left رو 0 کنید:


position:fixed;
top:0;
left:0;

0

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


لینک به پست

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

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

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

آدرس آنلاین

http://www.yaranenamaz.com

0

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


لینک به پست

http://jsfiddle.net/A5f4r/10/

بیا عزیز. یه مورد ساده

1

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


لینک به پست

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

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

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

شما از position: absolute; ؟!

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

ممنون

0

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


لینک به پست

یه خورده اسکرول بزن عکسش میاد.

0

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


لینک به پست

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

خب مهم نیست

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

سپاس

;)

0

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


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

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

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

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

1

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


لینک به پست

ارسال شده در (ویرایش شده)

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

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

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

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


<!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
0

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط naff
      سلام.
      من  میخوام یه صفحه ی استاتیک رو روی ftp  آپلود کنم به عنوان  index اصلی و بعد از کلیک روی دکمه ی مورد نظر کاربر منتقل بشه به سایت اصلی یا همون قالب وردپرس.
       مشکل اینجاست که وقتی صفحه ی  html  رو روی  ftp  آپلود میکنم سایت فقط این صفحه رو به عنوان  index  میشناسه و  این رو جایگزین  index وردپرس میکنه و این صفحه  رو  front page  میشناسه.
       در صورتی که من هر دوتاش رو  میخوام . و صفحه ی html  رو به عنوان  index  میخوام یعنی با وارد کردن اسم سایت اسن صفحه ظاهر بشه.
      صفحه ی اچ دی ام ال:
      https://altourneur.com/new.html
       صفحه ی اصلی سایت:
      https://altourneur.com

       
    • توسط Streetlife
      سلام کارشناسان عزیز و محترم
      دوستان چند روزه هرچی میگردم هیچ چیز مناسبی رو پیدا نمیکنم لطفا کمک بفرمایید.من یک طراح ورد پرسم و میخام واسه یک سایت که بلاگ وردپرس و فروشگاه پرستا شاپ هستش به صورت پاپ اپ یک نظرسنجی رو طراحی کنم که یه سوالی بپرسه و جواب رو بازدیدکننده ها تایپ کنن اما به این صورت که لایو سرچ باشه این فیلد یعنی از بین محصولات که روی دیتا بیس هستند با تایپ یک یا چند حرف ساجست بده لطفااااااااااا راهنمایی بفرمایید
    • توسط amirhosseinganjeh
      سلام دوستان نمیدونم چیکار کردم که عنوان صفحه رو نمایش میده توی همه صفحه ها
      این قسمت ابی رنگو توی عکس اول رو میگم

      تونستم توی صفحاتی که ویرایشگرشون بازه، نمایش عنوان صفحه رو خاموش کنم ولی توی صفحه فروشگاهم نمیتونم نمایشش رو خاموش کنم
       خاموشش هم میکنم باز هم نمایش میده(عکس دوم)
      اگه راه حلی دارید بفرمایید لطفا..

    • توسط Borzou
      سلام دوستان
      من حدود 1 ماهه که قالب سایتم رو تغییر دادم و این مشکل برام پیش اومده و عنوان سایتم هم در اول و هم در آخر جستجوهای گوگل نمایش داده میشه در صورتی که من عنوان سایت گذاشتم قسمت آخر.
      @Morteza
      @mehran-b
      چطور میشه این مسئله رو حل کرد؟  تنظیمات yoast  رو تنظیم کردم و مشکلی نداشت. تصویر پیوست شده.
      سایت First90day.ir
      تنظیمات نوشته ها و برگه ها هردو به صورت زیر تنظیم شده. اما مطابق تصویر ی که پیوست کردم نمایش میده.
      مشکل از کجاست؟

    • توسط digiactive
      سلام
      من از پوسته ی Business Responsiveness استفاده می کنم. زمانی که پیش نمایش دیدم همه چیز خوب بود اما بعد از نصب منوهای اصلی چپ چین هستند. فونتهاشون هم متفاوته.
      هرکاری می کنم درست نمیشن.
      راهنمایی می کنید لطفا. خوودم دیگه راهی به ذهنم نیمرسه.
      ادرس سایتم: digiactive.ir