Переключение видимости div в зависимости от положения прокрутки и высоты содержимого

Question

Переключение видимости div в зависимости от положения прокрутки и высоты содержимого

0

Я пытаюсь добиться наличия простых кнопок совместного доступа на стороне сообщения, которые видны только в том случае, если сообщение находится внутри представления. Поэтому они скрыты, если пользователь прокручивается выше или ниже этого сообщения.

jQuery waypoint это мое настоящее оружие выбора. Мой подход состоит из:

// first hiding the div
$('.post-sharing-side').hide();

// fading it in as soon as the headline reaches the top of the viewspace (that feels right in my use case)
$('.entry-title').waypoint(function(direction) {
    $('.post-sharing-side').fadeIn();
});

// fading it out again as soon as the upcoming div reaches the bottom of the viewspace
MISSING

У меня возникли проблемы с выяснением последней части: исчезновение снова. В идеале он также должен работать при прокрутке вверх. Любые идеи были бы высоко оценены!

Обновить:

Извините, если я не был достаточно ясен: эффект, который я ищу, в основном этот бит без использования абсолютных значений.

psteinweber 10 янв. 2014, в 07:35

Источник

Теги:

javascript

jquery

jquery-waypoints

2 ответа

0

Из документации путевой точки по адресу http://imakewebthings.com/jquery-waypoints/#docs:

Вертикальные путевые точки также могут использовать значение "bottom-in-view". Это ярлык для общей функции, которая устанавливает путевую точку, когда нижняя часть элемента попадает в нижнюю часть окна просмотра.

$ ('. thing'). waypoint ({offset: 'bottom-in-view'});

Это может помочь.

jacquard 10 янв. 2014, в 04:30

0

Да, я нашел это, но не смог заставить его работать. Куда идет действие fadeOut?
psteinweber 10 янв. 2014, в 06:16
0

Смотрите скрипку: jsbin.com/exoRirOh/1/edit .
jacquard 10 янв. 2014, в 07:07
0

Спасибо за усилия @theCoder - к сожалению, это не то, что я искал. Эффект, которого я пытаюсь достичь, в основном такой, но без абсолютных значений (но с длиной div): jsfiddle.net/psteinweber/ZUyRf/1
psteinweber 11 янв. 2014, в 07:45

Показать ещё 1 комментарий

Ещё вопросы

Да, я нашел это, но не смог заставить его работать. Куда идет действие fadeOut?
Смотрите скрипку: jsbin.com/exoRirOh/1/edit .
Спасибо за усилия @theCoder - к сожалению, это не то, что я искал. Эффект, которого я пытаюсь достичь, в основном такой, но без абсолютных значений (но с длиной div): jsfiddle.net/psteinweber/ZUyRf/1

psteinweber · Accepted Answer · 2014-01-13T06-17-00.000Z

Я решил это следующим образом, не используя в конечном итоге путевую точку jQuery:

$('.post-sharing-side').hide();

var entryheight = $('.entry-content').height();

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 350 && y < entryheight) {
         $('.post-sharing-side').fadeIn();
    } else {
        $('.post-sharing-side').fadeOut();
    }
});