Прокрутка страницы и появление блока (анимация)
Все привет. Вообщем хотел сделать чтобы при прокрутке страницы (ну скажем на 300px - scrollTop), появлялся div блок с position : fixed, а при обратной прокрутке (т.е. вверх) прокрутка < 300, этот блок исчезал.
Но сделал этот с анимацией, появление блока через opacity. Реализовал следующем : [code]
if (прокрутка > 300) {
вызвать анимацию появления плавного блока
}
else (div.style.opacity='0');
Да блок действительно появляется, если прокрутить больше 300px вниз, НО при прокрутке, еще ниже, допустим 400px( на 100px больше), по условию if(крутить > 300) опять запускается анимация, и блок опять начинает появляться.... при этом происходить менькание Вот полный код :
<html>
<body>
<head>
<style>
#block {width:100px;height:100px;background:#b3b3b3;opacity:0;position:fixed;}
#infa {position:fixed;background:yellow;}
</style>
</head>
<body>
<div id="block"></div>
<div id="infa"></div>
<script>for (var i = 0; i < 6000; i++) document.writeln(i)</script>
<script>
var block = document.getElementById('block');
var infa = document.getElementById('infa');
window.onscroll = function() {
var krutit = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
infa.innerHTML = window.pageYOffset
if( krutit > 300) {
animateProp({
elem : block,
start : 0,
end : 1,
prop : 'opacity',
duration:500,
})
}
else {block.style.opacity='0';}
}
function animate(opts) {
var start = new Date;
var timer = setInterval(function() {
var progress = (new Date - start) / opts.duration;
if (progress > 1) progress = 1;
opts.step( progress );
if (progress == 1) {
clearInterval(timer);
opts.complete && opts.complete();
}
}, opts.delay || 13);
return timer;
}
function animateProp(opts) {
var start = opts.start, end = opts.end, prop = opts.prop;
opts.step = function(progress) {
opts.elem.style[prop] = start+(end-start)*progress;
}
return animate(opts);
}
</script>
[/CODE]
</body>
</html>
|
if( krutit > 300 && block.style.opacity=='0') {
|
Цитата:
|
Не знаю как сделать кнопку чтобы просмотреть (
Факт не только в том, что при прокручивании постоянно вызывается ф-я появления блока (и что он постоянно мелькает), но и в том, что если поставить в switch case например 300 прокрутку, то при быстром прокручивании, эти 300px прокрутки - игнорируется и ничего не происходит... |
Цитата:
[HTML run] я в прошлый раз только в нужную сторону тебя подталкивал держи лентяй :p
<html>
<body>
<head>
<style>
#block {width:100px;height:100px;background:#b3b3b3;opacity:0;position:fixed;}
#infa {position:fixed;background:yellow;}
</style>
</head>
<body>
<div id="block"></div>
<div id="infa"></div>
<script>for (var i = 0; i < 6000; i++) document.writeln(i)</script>
<script>
var block = document.getElementById('block');
var infa = document.getElementById('infa');
window.onscroll = function() {
var krutit = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
infa.innerHTML = window.pageYOffset +' '+parseFloat('0'+block.style.opacity);
if( krutit > 300 ) {
if( parseFloat('0'+block.style.opacity)==0) {
animateProp({
elem : block,
start : 0,
end : 1,
prop : 'opacity',
duration:500,
})
}
}
else {block.style.opacity='0';}
}
function animate(opts) {
var start = new Date;
var timer = setInterval(function() {
var progress = (new Date - start) / opts.duration;
if (progress > 1) progress = 1;
opts.step( progress );
if (progress == 1) {
clearInterval(timer);
opts.complete && opts.complete();
}
}, opts.delay || 13);
return timer;
}
function animateProp(opts) {
var start = opts.start, end = opts.end, prop = opts.prop;
opts.step = function(progress) {
opts.elem.style[prop] = start+(end-start)*progress;
}
return animate(opts);
}
</script>
[/CODE]
</body>
</html>
|
спасибо, да просто знаний не хватало, вот сижу втыкаю ваш код
if( parseFloat('0'+block.style.opacity)==0) пойду искать инфу по parseFloat :) А обязательно ли ставить "0"? |
Цитата:
надеюсь понятно объяснил :\ |
Здравствуйте! При быстрой прокрутке наверх (после того как блок уже появился) блок не пропадает, почему это происходит, где покапать подскажите плиз
|
| Часовой пояс GMT +3, время: 14:57. |