بهم خوردن تنظیمات قیلی [بایگانی]

View Full Version : بهم خوردن تنظیمات قیلی

olampiad

پنج شنبه 19 تیر 1393, 15:02 عصر

سلام و خسته نباشید ب اساتید عزیز
به این کد ها ی نگا بندازید

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">

#logo{
width:70px;
height:70px;
background:#FC0;
border-radius:100%;
position:absolute;
top:45px;
right:45px;
}
#one{
width:100%;
height:900px;
background:#FCC;
}
#two{
width:100%;
height:900px;
background:#6FF;
}
</style>
<title>style</title>
</head>
<body>

<div id="one"></div>
<div id="two"></div>

<div id="logo"></div>

 
 
 

<script type="text/javascript">

var dd=0;
var bb=0;
setInterval(function(){
var otd=window.pageYOffset;
var ggg=0;
if(window.pageYOffset>10 && window.pageYOffset<900){
dd=otd+10;
bb=otd+40;

document.getElementById('logo').style.position="absolute";
document.getElementById('logo').style.right="10px";

document.getElementById('logo').style.marginTop=dd +"px";
document.getElementById('logo').style.marginRight= bb+"px";
}

if(window.pageYOffset>901 && window.pageYOffset<1900){
dd=otd+10;
bb=otd-500;

document.getElementById('logo').style.position="absolute";
document.getElementById('logo').style.left="100px";
document.getElementById('logo').style.marginTop=dd +"px";
document.getElementById('logo').style.marginLeft=b b+"px";
}

},10);

</script>
</body>
</html>

اگه امکانش هست این رو یک بار تو سیستم خودتون اجرا کنید.
مشاهده میکنید:
بار اول که کد رو تو صفحه اجرا میکنید درست کار میکند و #logo همان مسیری را طی میکند که باید طی کند.
ولی وقتی اسکرول را یک بار به بالا برگردانده و دوباره به پایین می آوریم همه ی تنظیمات بهم میریزد.
مشکل از کجاست؟
چرا بار دوم تنظیمات بهم میریزد.
ممنون

barnamenevisforme

پنج شنبه 19 تیر 1393, 15:22 عصر

sadegh1362

شنبه 21 تیر 1393, 07:27 صبح

به دلیل تکراری بودن

sadegh1362

شنبه 21 تیر 1393, 07:28 صبح

سلام
اول این بخش که مربوط به اسکریپت مدیریت سایز هست،رو غیر فعال کن،ببین چه تغییری ایجاد میشه،
بعد با یه حساب و کتاب درست مقادیر رو برای شرط ها و دستورات اون تظیم کن
سلام
فقط کافیه در شر اول left رو به auto دهی کنی درست می شه . به این صورت :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">

#logo{
width:70px;
height:70px;
background:#FC0;
border-radius:100%;
position:absolute;
top:45px;
right:45px;
}
#one{
width:100%;
height:900px;
background:#FCC;
}
#two{
width:100%;
height:900px;
background:#6FF;
}
</style>
<title>style</title>
</head>
<body>

<div id="one"></div>
<div id="two"></div>

<div id="logo"></div>

 
 
 

<script type="text/javascript">

var dd=0;
var bb=0;
setInterval(function(){
var otd=window.pageYOffset;
var ggg=0;
if(window.pageYOffset>10 && window.pageYOffset<900){
dd=otd+10;
bb=otd+40;

document.getElementById('logo').style.position="absolute";
document.getElementById('logo').style.right="10px";
document.getElementById('logo').style.left="auto";

document.getElementById('logo').style.marginTop=dd +"px";
document.getElementById('logo').style.marginRight= bb+"px";
}

if(window.pageYOffset>901 && window.pageYOffset<1900){
dd=otd+10;
bb=otd-500;

document.getElementById('logo').style.position="absolute";
document.getElementById('logo').style.left="100px";
document.getElementById('logo').style.marginTop=dd +"px";
document.getElementById('logo').style.marginLeft=b b+"px";
}

},10);

</script>
</body>
</html>