Функция jquery sticky не работает, когда конец родительского div - PullRequest
Новая
       12

Функция jquery sticky не работает, когда конец родительского div

0 голосов
/ 02 октября 2019

Как вы можете видеть на FIDDLE , проблема в том, что при прокрутке в первом разделе он работает, но когда он достигает конца первого раздела, он должен исчезнуть и снова появиться во втором разделе

У меня есть рабочая программа, но она использует «position: sticky», но мне нравится делать подобный эффект, но без использования «position: sticky»

Моя рабочая скрипка при использовании position: sticky myскрипка 

var $sticky = jQuery('.sticky');


jQuery(window).on('scroll', function() {
  var scroll = jQuery(window).scrollTop();
  $sticky.each(function() {
    const $this = jQuery(this);
    const stickyTop = $this.offset().top;
    const stickyBottom = stickyTop + $this.outerHeight();

    const $stickyTo = $this.parent();
    const stickyToTop = $stickyTo.offset().top;
    const stickyToBottom = stickyToTop + $stickyTo.outerHeight();

    if (stickyBottom >= stickyToBottom) {
      if (scroll < stickyTop) {
        //$sticky.addClass('fixed').removeClass('abs');
      } else {
        //$sticky.addClass('abs');
      }
    } else if (scroll > stickyToTop) {
      $(this).addClass('stuck');
    } else if (scroll < stickyToTop) {
      $(this).removeClass('stuck');
    }

  })

});
.stickyTo {
  border: 1px solid red;
  margin-bottom: 50px;
}

.content {
  height: 400px;
}

.sticky {
  display: none;
}

.stuck {
  display: block;
}

.row {
  background: #ccc;
}

.fixed {
  position: fixed;
  top: 0;
  bottom: auto;
}

.abs {
  position: absolute;
  bottom: 0;
  top: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<br><br><br><br>
<div class="grid-container">

  <div class="top_picks"></div>
  <div class="stickyTo">
    <div class="sticky" style="position:fixed; top: 100px;background:yellow">stick and unstuck on end of parent container</div>
    <div class="content">Content</div>
  </div>
  <br><br><br>
  <div class="top_picks"></div>
  <div class="stickyTo">
    <div class="sticky" style="position:fixed; top: 100px;background:yellow">another stick and unstuck on end of parent container</div>
    <div class="content">Content</div>
  </div>

</div>
<!-- end grid-container -->

<div style="height:800px;"></div>
...