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

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

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


    • توسط sina-monfared
      سلام 
      در بخش دسته بندی محصولات؛ امکان استفاده از ابزار های ویرایش مربوط به این قسمت حذف شده است که در تصویر مشخص کرده ام.
      ممنون میشم راهنمایی بفرمایید.


    • توسط mr.meysam
      سلام
      وقت بخیر
      من روی وردپرس از قالب گود نیوز استفاده میکنم ولی امروز متوجه شدم که از هر تصویر حدود 18 تا سایز دیگه هم میسازه 
      چطور میتونم جلوی این کارو بگیرم؟
      حالا چطور میتونم اینا رو حذف کنم؟
      سایز هایی که میسازه اینا هستن
      120*76
       150*150
      180*120
      190*122
      220*140
      265*168
      274*173
      278*202
      284*180
      300*168
      308*192
      373*270
      45*35
      475*342
      567*365
      610*365
      90*60
      95*64
      تشکر
    • توسط abolfazlkh6
      سلام من سایتم چندوقته بالا نمیاد الان که از پشتیبان سایت پرسیدم گفت این مشکلای زیر وجود دارن کسی میتونه حلش کنه؟
      PHP Fatal error: Uncaught Error: Call to undefined function mysql_escape_string() in /home/chahgavi/public_html/wp-content/themes/barad/functions.php:60 Stack trace: #0 /home/chahgavi/public_html/wp-settings.php(426): include() #1 /home/chahgavi/public_html/wp-config.php(90): require_once('/home/chahgavi/...') #2 /home/chahgavi/public_html/wp-load.php(37): require_once('/home/chahgavi/...') #3 /home/chahgavi/public_html/wp-blog-header.php(13): require_once('/home/chahgavi/...') #4 /home/chahgavi/public_html/index.php(17): require('/home/chahgavi/...') #5 {main} thrown in /home/chahgavi/public_html/wp-content/themes/barad/functions.php on line 60  
    • توسط behnamstar
      سلام و عرض ادب
      من یه سایت وردپرسی دارم که به تازگی تغییر دامنه روش انجام دادم که بعد ازینکار مشکل عجیبی اتفاق افتاده 
      من دامنه ی https://damane1.co m رو ریدایرکت کردم به https://damane2.co m الان اتفاقی که میفته دامنه 1 ریدایرکت میشه روی دامنه 2 
      ولی زیر دامنه ها ریدایرکت نمیشن 
      مثلا روی این لینک کلیک بشه (https://damane1.co m/linksite) باید این لینک باز شه (https://damane2.co m/linksite)
      ولی این لینکها جدا جدا باز میشن 
      فقط دامنه https://damane1.co m روی https://damane2.co m ریدایرکت میشه بقیه ی لینک ها همه جدا جدا باز میشن.
      ممنون میشم از دوستان کمک کنن 
      حتی به هاست پشتیبانی هم تیکت دادم ولی متوجه مشکل نشدن.