Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.01.2014, 16:37
Интересующийся
Отправить личное сообщение для 0leg9 Посмотреть профиль Найти все сообщения от 0leg9
 
Регистрация: 10.06.2013
Сообщений: 12

Появление/исчезновение элемента при прокрутке страницы JQuery
Нужно было, чтобы при прокрутке страницы вниз на 200px появлялся новый элемент с идентификатором hid, сделал так:
$(document).ready(function(){
        $(window).scroll(function(){
            var bo = $("body").scrollTop();
		if ( bo > 200 ) $("#hid").animate({'opacity':'1'},500);
        })
    })

Теперь нужно сделать, чтобы при прокрутке обратно этот элемент исчезал. Такая конструкция не работает:
if ( bo < 200 ) $("#hid").animate({'opacity':'0'},500);
Ответить с цитированием
  #2 (permalink)  
Старый 12.01.2014, 16:58
Интересующийся
Отправить личное сообщение для 0leg9 Посмотреть профиль Найти все сообщения от 0leg9
 
Регистрация: 10.06.2013
Сообщений: 12

Хм, если использовать не .animate, а .css, то все работает
$(document).ready(function(){
        $(window).scroll(function(){
            var bo = $("body").scrollTop();
            $('#hid').text(bo);
			if ( bo > 200 ) { $("#hid").css("display", "block"); } else { $("#hid").css("display", "none"); };
        })
    })
Ответить с цитированием
  #3 (permalink)  
Старый 12.01.2014, 17:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

0leg9,
запускайте анимацию 2 раза а не 500
Ответить с цитированием
  #4 (permalink)  
Старый 12.01.2014, 17:18
Интересующийся
Отправить личное сообщение для 0leg9 Посмотреть профиль Найти все сообщения от 0leg9
 
Регистрация: 10.06.2013
Сообщений: 12

Сообщение от рони Посмотреть сообщение
0leg9,
запускайте анимацию 2 раза а не 500
Я был уверен, что это значение в миллисекундах.
Ответить с цитированием
  #5 (permalink)  
Старый 12.01.2014, 17:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

0leg9,
Сообщение от 0leg9
Я был уверен, что это значение в миллисекундах.
я про animate а не про миллисекунды вам написал
Ответить с цитированием
  #6 (permalink)  
Старый 12.01.2014, 17:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

0leg9,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #hid{
    width: 50px;
    height: 50px;
    background: #FF0000;
    opacity: 0;
    position: fixed;
  }
  body{
     height: 1500px;
  }

  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
 $(document).ready(function(){
        $(window).scroll(function(){
            var bo = $(this).scrollTop();
             var a = $("#hid").css('opacity')
             $("#hid").html(bo);
if ( bo >= 200 && a == 0) {$("#hid").stop().animate({'opacity':'1'},500)};
        if ( bo < 200 && a == 1) {$("#hid").stop().animate({'opacity':'0'},500)};
        })
    })

  </script>
</head>

<body>
   <div id="hid">

</div>


</body>

</html>

Последний раз редактировалось рони, 12.01.2014 в 17:59.
Ответить с цитированием
  #7 (permalink)  
Старый 12.01.2014, 22:11
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

<style type="text/css">
      #hid {
        width: 50px;
        height: 50px;
        background: #FF0000;
        opacity: 0;
        position: fixed;
      }
      body {
        height: 1500px;
      }
    </style>
<body>
    <div id="hid"></div>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
    $(function () {
      var element = $("#hid"), display;
      $(window).scroll(function () {
        display = $(this).scrollTop() >= 200;
        display != element.css('opacity') && element.stop().animate({ 'opacity': display }, 500);
      });
    });
  </script>
</body>

рони,
bo ? , a ?

Последний раз редактировалось Vlasenko Fedor, 12.01.2014 в 23:50.
Ответить с цитированием
  #8 (permalink)  
Старый 13.01.2014, 00:04
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

<style type="text/css">
body{
    min-height: 1500px;
}
#blfix{
    display:none;
    position:fixed;
    top:0; 
    background-color: red;
    width: 100%;
    padding: 20px;
}
</style>
<div id="content">Пример теста</div>
<div id="blfix">Наш блок</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
jQuery(function(f){
    var element = f('#blfix');
    f(window).scroll(function(){
        element['fade'+ (f(this).scrollTop() > 200 ? 'In': 'Out')](500);           
    });
}); 
</script>
Ответить с цитированием
  #9 (permalink)  
Старый 23.02.2014, 00:29
Новичок на форуме
Отправить личное сообщение для fcos Посмотреть профиль Найти все сообщения от fcos
 
Регистрация: 22.02.2014
Сообщений: 1

Спасибо ОГРОМНОЕ за эту тему! я уже отчаялась найти как такого эффекта добиться
Ответить с цитированием
  #10 (permalink)  
Старый 25.04.2014, 14:15
Новичок на форуме
Отправить личное сообщение для VitaliyGR Посмотреть профиль Найти все сообщения от VitaliyGR
 
Регистрация: 25.04.2014
Сообщений: 1

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фиксация div'a вверху страницы при прокрутке razorg1991 Элементы интерфейса 2 30.08.2013 22:13
Вызов вункции при изменении экрана и при загрузке страницы frost18 Общие вопросы Javascript 2 31.08.2011 22:28
Эффект при прокрутке страницы deNSe_01 Events/DOM/Window 2 19.08.2011 22:53
выборка в php при прокрутке страницы вниз Tchort Events/DOM/Window 4 11.08.2011 17:38
При достижении низа страницы prokopoffmusic jQuery 0 21.06.2011 04:52