Скрыть элемент после прокрутки к верху его контейнера - PullRequest
Новая
       10

Скрыть элемент после прокрутки к верху его контейнера

0 голосов
/ 01 февраля 2019

У меня есть элемент внутри контейнера с overflow: scroll.Так что это здорово, однако, я хочу, чтобы элемент прокручивался, как он делает, но как только элемент переполняет верхнюю часть его -grandparents- контейнера, я хочу, чтобы весь элемент скрывался, а не обрезался при прокрутке.вне поля зрения (обычная функциональность).

Ранее я получал элемент, который можно скрыть / показать при прокрутке окна, однако на самом деле я хотел, чтобы элемент скрывался / показывался при прокрутке элемента внутри него.контейнер (и когда он переполняет его контейнер бабушки и дедушки), а не когда я прокручиваю окно.

jQuery

$(document).scroll(function () {

 if ($('.inner-container').scrollTop()) {
    $('.scroll-content').css({'display': 'none'});   

} else {
  $('.scroll-content').css({'display:' : 'block'});
  }

});

Поэтому я понимаю, что попытка сделать это проблематична в jQuery, когда элемент уже переполнен: прокрутите его и scrollTop () обычно относится только к прокрутке окна.Я не могу понять, как сделать element.scrollTop () таким образом, чтобы это работало.Любая помощь будет принята с благодарностью.

html

<div class="scroll-container">

<div class="inner-container">
  <div class="scroll-content"> I want this to scroll as it is and then hide all of the orange block when it overflows outside of its container.. i.e the top of the orange block hits the top of the yellow block. The orange block should hide. 
  </div>
 </div>
</div>

css

.scroll-container {
 width: 200px;
  height: 200px;
  background-color: yellow;
  overflow: scroll;
  margin-left: 50px;
  margin-top: 50px;
}

.inner-container {
  width: 150px;
  height: 400px;
}

.scroll-content {
  margin-top: 30px;
  width: 190px;
  height: 150px;
  background-color: orange;
}

Правитьскрипка здесь http://jsfiddle.net/3cdha2sy/29/

В настоящее время jQuery ничего не делает, так как я много играл с ним, а теперь он даже не скрывается за прокруткой окна.Буду очень признателен за любую помощь.

1 Ответ

0 голосов
/ 01 февраля 2019

Вы можете использовать jQuery ' position , чтобы найти относительное расстояние между содержимым прокрутки и его родителем.

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

Примечание: Я изменил одну вещь по сравнению с вашим исходным CSS.Вместо использования margin-top для создания смещения прокрутки содержимого от верха родительского элемента я использую padding-top.Это позволяет смещать математику несложно. 

var content = $('.scroll-content');

function scrollHandler() {
  if (content.position().top <= 0) {
    content.hide();
  }
}

$('.scroll-container').scroll(scrollHandler);
.scroll-container {
  width: 200px;
  height: 200px;
  background-color: yellow;
  overflow: scroll;
  margin-left: 50px;
  padding-top: 50px;
}

.inner-container {
  width: 150px;
  height: 400px;
}

.scroll-content {
  width: 190px;
  height: 150px;
  background-color: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll-container">
  <div class="inner-container">
    <div class="scroll-content"> Content goes here Content goes here Content goes here
    </div>
  </div>
</div>

http://jsfiddle.net/7wcL46k0/2/

Редактировать:

Чтобы поле появилось послепрокручивая вниз, вам нужно отследить родительский элемент - в вашем случае, .inner-container.Причина в том, что .scroll-content, будучи скрытым, больше не сообщает position().top.Тем не менее, .inner-container - это невидимый контейнер, который не скрыт, и поэтому продолжает сообщать о своем position().top.

.

var content = $('.scroll-content');
var innerContainer = $('.inner-container');

function scrollHandler() {
  if (innerContainer.position().top <= 0) {
    content.hide();
  } else {
    content.show();
  }
}

$('.scroll-container').scroll(scrollHandler);
.scroll-container {
  width: 200px;
  height: 200px;
  background-color: yellow;
  overflow: scroll;
  margin-left: 50px;
  padding-top: 50px;
}

.inner-container {
  width: 150px;
  height: 400px;
}

.scroll-content {
  width: 190px;
  height: 150px;
  background-color: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll-container">
  <div class="inner-container">
    <div class="scroll-content"> I want this to scroll as it is and then hide all of the orange block when it overflows outside of its container.. i.e the top of the orange block hits the top of the yellow block. The orange block should fadeOut.
    </div>
  </div>
</div>

http://jsfiddle.net/5k8ty2dw/

...