Javascript-форум - Получение значения scroll

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Получение значения scroll (https://javascript.ru/forum/events/46067-poluchenie-znacheniya-scroll.html)

Получение значения scroll

Есть div элемент, красный квадрат :)

Нужно, чтобы он появлялся когда scrollTop = 300px (это просто, знаю как) и исчезал, когда до конца документа осталось 600px, тут застрял. Не знаю из чего, что получить и как сравнить с 600px.

Требуется подсказка.

Спасибо :)

Bravo,
взять высоту всей страницы и вычесть scrollTop если величина меньше 600 то исчезновение

http://learn.javascript.ru/metrics-window

рони,
Спасибо за ссылку. Буду разбираться :-)

рони,
Сделал как вы подсказали, но не работает.

var $test3 = $(document).height() - $(document).scrollTop();

console.log($test3);

if ($test3 < 600){
console.log('YES!');
$('#qw').hide();
}

У body высота 2000px.

Bravo,
Учти еще и высоту окна:
var $test3 = $(document).height()-$(window).height() - $(document).scrollTop();

Bravo,
вариант если вам нужно чтоб блок исчезал при появлении футера

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <style type='text/css'>
  body{padding:0px;margin:0px}
  *{margin:0}
  html,body{height:2000px}
  .wrapper{min-height:100%;height: auto !important;height:100%;margin:0 auto -170px}
  .footer,.push{height:600px}
  .footer{background:#6495ED}
  #scroll{background:#FF0000;height:50px;width:50px;position:fixed;right:0px;bottom:40px;display:none}
  </style>
<script type='text/javascript'>
$(function(){
var up = $("#scroll"),
    b = up.css("bottom"),
    h = up.height(),
    d = $(".footer").offset();
$(document)
    .scroll(function () {
        var c = $(window).height(),
            a = $(this).scrollTop();
         300 < a && d.top > a + c - h? up.fadeIn(500) : up.fadeOut(200);

    });
up.click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});
</script>
</head>
<body>
<div id="scroll"></div>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2013</p>
</div>
</body>
</html>

другой вариант когда кнопка поднимается вместе с футером тут

Делаю паралалакс страничку, она состоит из шести блоков. Еще есть элемент (к примеру красный квадрат 100px на 100px), который появляется и исчезает, этот квадрат обладает фиксированной позицией и должен быть поверх всех блоков, располагается в левой части экрана. Квадрат появляется в начале второго блока и должен исчезнуть в начале шестого.

Появление квадрата, это высота первого блока, плюс часть второго и все это сравниваю со scrollTop. А вот исчезновение так просто не получается. Думал про привязку к последнему блогу, но не пришел к какому-то даже пробному коду. Решил вот искать последние 600px документа.

Текущий "грязный" вариант:

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <meta charset="utf-8">

    <style>
        body{
            height: 2000px;
        }

        div{
            width: 100px;
            height: 100px;
            position: fixed;
            top: 300px;
            left: 50px;
        }
        #go{
            background: red;
            display: none;
        }

    </style>

    <script type="text/javascript" src="jquery-2.1.0.min.js"></script>

    <script>
        $(function(){
            var $go = $('#go'),
                    $window = $(window);

            $window.scroll(function(){

                var $test3 = $(document).height() - $(window).height() - $(document).scrollTop();

                console.log($test3);

                if ($(document).scrollTop() > 300){
                    $go.show();
                }
                else {
                    $go.hide();
                }

                if ($test3 < 600){
                    console.log('YES!');
                    $go.hide();
                }
            })
        });
    </script>

</head>
<body>

<div id="go"></div>


</body>
</html>

krasovsky,
Спасибо добавил высоту окна в свой "грязный" пример, только не пойму верно считает или нет.

рони,
Вариант хороший, учту его на будущие, спасибо, но у меня получается паралаксс, последний блок должен пройти часть экрана прежде чем квадрат исчезнет :(

Bravo,
предположим футер это ваш 6 блок ... :write: можно вам поставить любой класс вместо .footer строка 32 -- этот же код можно использовать для любого блока.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <style type='text/css'>
  body{padding:0px;margin:0px}
  *{margin:0}
  html,body{height:2000px}
  .wrapper{min-height:100%;height: auto !important;height:100%}
  .footer,.push{height:600px}
  .footer{background:#6495ED}


        #go{
            width: 100px;
            height: 100px;
            position: fixed;
            top: 300px;
            left: 50px;
            background: red;
            display: none;
        }

  </style>
<script type='text/javascript'>
$(function(){
var up = $("#go"),
    b = parseFloat(up.css("top")),
    h = up.height(),
    d = $(".footer").offset();
$(document)
    .scroll(function () {
        var a = $(this).scrollTop();
         300 < a && d.top > a + b + h ? up.show() : up.hide();

    });
});
</script>
</head>
<body>
<div id="go"></div>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2013</p>
</div>
</body>
</html>