Форум

0leg9 · #1 (**permalink**) 12.01.2014, 16:37

Нужно было, чтобы при прокрутке страницы вниз на 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);

0leg9 · #2 (**permalink**) 12.01.2014, 16:58

Хм, если использовать не .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

0leg9,
запускайте анимацию 2 раза а не 500

0leg9 · #4 (**permalink**) 12.01.2014, 17:18

Сообщение от рони

0leg9,
запускайте анимацию 2 раза а не 500

Я был уверен, что это значение в миллисекундах.

рони · #5 (**permalink**) 12.01.2014, 17:25

0leg9,

Сообщение от 0leg9

Я был уверен, что это значение в миллисекундах.

я про animate а не про миллисекунды вам написал

рони · #6 (**permalink**) 12.01.2014, 17:47

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>

Vlasenko Fedor · #7 (**permalink**) 12.01.2014, 22:11

<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 · #8 (**permalink**) 13.01.2014, 00:04

<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>

fcos · #9 (**permalink**) 23.02.2014, 00:29

Спасибо ОГРОМНОЕ за эту тему! я уже отчаялась найти как такого эффекта добиться

VitaliyGR · #10 (**permalink**) 25.04.2014, 14:15

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

Форум

Справочник

Discord чат

Курсы javascript