CODEWITHSUNDEEP
javascripthtmlcss
Undelivered
Undelivered

Reputation: 45

Fixed div with scrollable div inside - scrollTop() returns 0

I am building a website with a few fixed div. Each of them is fixed for 100px of scrolling on the page.

Inside one of the fixed divs is a nested div that is scrollable. Scrolling inside this div is possible. I want feedback within javascript of how far I've scrolled inside the div, to notice when it has reached the bottom of the div.

For the whole site the function scrollTop() is working and return the pixels I've scrolled so far. But when I am trying to use the scrollTop() function on the inner div it always returns 0. I don't know how to fix this problem.

var aboutscroll = $('#timeline');
console.log(aboutscroll.scrollTop() + " px");
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  overflow: scroll;
  height: 100vh;
}

#chapter2 {
  width: 100vw;
  position: fixed
}
<div class="row" id="chapter2">
  <div class="black col-lg-6 col-xs-12" style="color:white">
    <p>About</p>

  </div>
  <div class="white col-lg-6 col-xs-12">

    <div class="timeline" id="timeline">
      <div class="kontainer left">
        <div class="content">
          <h2>2017</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
      <div class="kontainer right">
        <div class="content">
          <h2>2016</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
      <div class="kontainer left">
        <div class="content">
          <h2>2015</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
      <div class="kontainer right">
        <div class="content">
          <h2>2012</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
      <div class="kontainer left">
        <div class="content">
          <h2>2011</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
      <div class="kontainer right">
        <div class="content">
          <h2>2007</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Views: 103

Answers (1)

cssyphus
cssyphus

Reputation: 40038

You need to use the jQuery .scroll() method on the DIV you wish to monitor:

var aboutscroll = $('#timeline');
aboutscroll.scroll(function(){
    //do stuff here
});

Demo:

var aboutscroll = $('#timeline');
aboutscroll.scroll(function(){
    $('#msg').html( $(aboutscroll).scrollTop() + " px" );
});
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  overflow: scroll;
  height: 100vh;
}

#chapter2 {
  width: 100vw;
  position: fixed
}
#msg{position:fixed;top:0;right:0;max-width:80px;padding:15px;text-align:center;background:wheat;z-index:2;}
<div class="row" id="chapter2">
  <div class="black col-lg-6 col-xs-12" style="color:white">
    <p>About</p>

  </div>
  <div class="white col-lg-6 col-xs-12">
    <div class="timeline" id="timeline">
      <div class="kontainer left">
        <div class="content">
          <h2>2017</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
      <div class="kontainer right">
        <div class="content">
          <h2>2016</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
      <div class="kontainer left">
        <div class="content">
          <h2>2015</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
      <div class="kontainer right">
        <div class="content">
          <h2>2012</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
      <div class="kontainer left">
        <div class="content">
          <h2>2011</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
      <div class="kontainer right">
        <div class="content">
          <h2>2007</h2>
          <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="msg"></div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Upvotes: 1

Related Questions