Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.03.2014, 17:19
Аватар для Bravo
Интересующийся
Отправить личное сообщение для Bravo Посмотреть профиль Найти все сообщения от Bravo
 
Регистрация: 26.03.2014
Сообщений: 19

Получение значения scroll
Есть div элемент, красный квадрат

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

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

Спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 26.03.2014, 18:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

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

http://learn.javascript.ru/metrics-window
Ответить с цитированием
  #3 (permalink)  
Старый 27.03.2014, 03:24
Аватар для Bravo
Интересующийся
Отправить личное сообщение для Bravo Посмотреть профиль Найти все сообщения от Bravo
 
Регистрация: 26.03.2014
Сообщений: 19

рони,
Спасибо за ссылку. Буду разбираться :-)
Ответить с цитированием
  #4 (permalink)  
Старый 27.03.2014, 09:27
Аватар для Bravo
Интересующийся
Отправить личное сообщение для Bravo Посмотреть профиль Найти все сообщения от Bravo
 
Регистрация: 26.03.2014
Сообщений: 19

рони,
Сделал как вы подсказали, но не работает.
var $test3 = $(document).height() - $(document).scrollTop();

console.log($test3);

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


У body высота 2000px.
Ответить с цитированием
  #5 (permalink)  
Старый 27.03.2014, 10:05
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Bravo,
Учти еще и высоту окна:
var $test3 = $(document).height()-$(window).height() - $(document).scrollTop();
Ответить с цитированием
  #6 (permalink)  
Старый 27.03.2014, 10:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

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>

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

Последний раз редактировалось рони, 27.03.2014 в 10:34.
Ответить с цитированием
  #7 (permalink)  
Старый 27.03.2014, 16:11
Аватар для Bravo
Интересующийся
Отправить личное сообщение для Bravo Посмотреть профиль Найти все сообщения от Bravo
 
Регистрация: 26.03.2014
Сообщений: 19

Делаю паралалакс страничку, она состоит из шести блоков. Еще есть элемент (к примеру красный квадрат 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>
Ответить с цитированием
  #8 (permalink)  
Старый 27.03.2014, 16:16
Аватар для Bravo
Интересующийся
Отправить личное сообщение для Bravo Посмотреть профиль Найти все сообщения от Bravo
 
Регистрация: 26.03.2014
Сообщений: 19

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

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

Последний раз редактировалось Bravo, 27.03.2014 в 16:18.
Ответить с цитированием
  #9 (permalink)  
Старый 27.03.2014, 16:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Bravo,
предположим футер это ваш 6 блок ... можно вам поставить любой класс вместо .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>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получение значения переменной внутри обработчика события jQuery Mbenga Общие вопросы Javascript 2 01.07.2013 10:57
получение значения поля eidicon jQuery 4 02.07.2012 19:06
получение значения css-свойств demoniqus Общие вопросы Javascript 0 12.02.2012 12:27
получение значения из классов karmis Events/DOM/Window 1 14.10.2011 19:09
Получение значения соседнего элемента Max Tretyakov Events/DOM/Window 2 27.06.2011 22:01