Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.05.2013, 14:32
Профессор
Отправить личное сообщение для hoax Посмотреть профиль Найти все сообщения от hoax
 
Регистрация: 20.09.2012
Сообщений: 151

Прокрутка страницы и появление блока (анимация)
Все привет. Вообщем хотел сделать чтобы при прокрутке страницы (ну скажем на 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>

Последний раз редактировалось hoax, 13.05.2013 в 00:42.
Ответить с цитированием
  #2 (permalink)  
Старый 12.05.2013, 17:06
Аватар для NoResponse
Профессор
Отправить личное сообщение для NoResponse Посмотреть профиль Найти все сообщения от NoResponse
 
Регистрация: 17.06.2010
Сообщений: 152

if( krutit > 300 && block.style.opacity=='0') {
Ответить с цитированием
  #3 (permalink)  
Старый 12.05.2013, 17:54
Профессор
Отправить личное сообщение для hoax Посмотреть профиль Найти все сообщения от hoax
 
Регистрация: 20.09.2012
Сообщений: 151

Сообщение от NoResponse Посмотреть сообщение
if( krutit > 300 && block.style.opacity=='0') {
неа. не получается
Ответить с цитированием
  #4 (permalink)  
Старый 13.05.2013, 00:49
Профессор
Отправить личное сообщение для hoax Посмотреть профиль Найти все сообщения от hoax
 
Регистрация: 20.09.2012
Сообщений: 151

Не знаю как сделать кнопку чтобы просмотреть (

Факт не только в том, что при прокручивании постоянно вызывается ф-я появления блока (и что он постоянно мелькает), но и в том, что если поставить в switch case например 300 прокрутку, то при быстром прокручивании, эти 300px прокрутки - игнорируется и ничего не происходит...
Ответить с цитированием
  #5 (permalink)  
Старый 13.05.2013, 02:35
Аватар для NoResponse
Профессор
Отправить личное сообщение для NoResponse Посмотреть профиль Найти все сообщения от NoResponse
 
Регистрация: 17.06.2010
Сообщений: 152

Цитата:
Не знаю как сделать кнопку чтобы просмотреть (
вот так
[HTML run]


я в прошлый раз только в нужную сторону тебя подталкивал
держи лентяй
<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>
Ответить с цитированием
  #6 (permalink)  
Старый 13.05.2013, 14:38
Профессор
Отправить личное сообщение для hoax Посмотреть профиль Найти все сообщения от hoax
 
Регистрация: 20.09.2012
Сообщений: 151

спасибо, да просто знаний не хватало, вот сижу втыкаю ваш код

if( parseFloat('0'+block.style.opacity)==0)

пойду искать инфу по parseFloat

А обязательно ли ставить "0"?

Последний раз редактировалось hoax, 13.05.2013 в 15:53.
Ответить с цитированием
  #7 (permalink)  
Старый 13.05.2013, 18:56
Аватар для NoResponse
Профессор
Отправить личное сообщение для NoResponse Посмотреть профиль Найти все сообщения от NoResponse
 
Регистрация: 17.06.2010
Сообщений: 152

Сообщение от hoax
А обязательно ли ставить "0"?
изначально block.style.opacity вернет пустую строку, дылее parseFloat грубо говоря из строки делает число. из пустой строки получится если не ошибаюсь NaN. поэтому чтобы в parseFloat не было пустой строки, подставляем 0
надеюсь понятно объяснил :\
Ответить с цитированием
  #8 (permalink)  
Старый 30.03.2014, 11:57
Новичок на форуме
Отправить личное сообщение для NIKOLYA87 Посмотреть профиль Найти все сообщения от NIKOLYA87
 
Регистрация: 30.03.2014
Сообщений: 1

Здравствуйте! При быстрой прокрутке наверх (после того как блок уже появился) блок не пропадает, почему это происходит, где покапать подскажите плиз
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отступ у блока с fixed в низу страницы tihonan Элементы интерфейса 2 29.03.2013 11:59
Прокрутка страницы user100500 Events/DOM/Window 11 15.09.2012 13:38
chrome firebug lite и прокрутка страницы в самый низ cmygeHm Общие вопросы Javascript 3 28.02.2012 14:34
Прокрутка страницы с помощью клавиш Mirgorod Events/DOM/Window 0 17.06.2010 22:39
Javascript : появление блока из под другого блока KingR Элементы интерфейса 3 12.05.2010 21:40