scrollTop position incorrect when scrolling back to top of window

Question

scrollTop position incorrect when scrolling back to top of window

423 views Asked by scopeak At 19 January 2019 at 10:03

I am using scrollTop to get the current scroll position of an inner scroll div .content-inner. From here, I am then adding a translate3d to change the position of another div .header-top to give it an animation effect.

The issue I have is after scroll back up on .content-inner the .header-top position is a bit glitchy and not how it originally positioned.

Depending on the speed I scroll back up too will determine how far the position changes. I suspect it's to do with the double negative values outputting on translate3d if you check the console.

See: https://jsfiddle.net/ez379rax/5/

Original Q&A

There are 1 answers

**Alex Leo** · Accepted Answer · 2019-01-19T12:13:23+00:00

Yes you are correct, the problem was a negative value in the calculation once you have reached the top.

I have made some changes to the code, remove unnecessary overflows, and capture the window scroll event. Also made the header fits nicely inside the container.

var pos = 0;
var $ = jQuery;

 $(window).on("scroll", function() {

  var st = $(this).scrollTop();
  pos = (1.6 * (-st) - 20);
 
  if(st === 0)
  {
   pos = 0;
  }

  var up = 'translateY(' + pos + 'px )';

  $(".header").css({
    "transform": up
  });

});

.header{
   color: #333;
    height: 150px;
    padding: 25px;
    width:100%;
    position: fixed;
  background:cornflowerblue;
    margin:5px;
}

.content-wrap{
 height:100%
}

.content-inner{
  padding-top: 100px;
    height: 100%;
    padding-left: 25px;
    padding-right: 25px;
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    -ms-scroll-chaining: none;
    display: block;
  background:#fff
}

.scroll-inner{
   min-height: calc(100% + 36px);
}

.card{
 margin-bottom:1.5rem;
  width:100%;
 p{
  margin-bottom:0
 }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class="content-wrap">
    <div class="header">
      <h4>
        Widget Header
      </h4>
    </div>

    <div class="content-inner">
      <div class="scroll-inner">
        <div class="card">
          <div class="card-body">
            <h2>
              Filler Card
            </h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
        </div>
        <!-- end of card -->
        <div class="card">
          <div class="card-body">
            <h2>
              Filler Card
            </h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
        </div>
        <!-- end of card -->
        <div class="card">
          <div class="card-body">
            <h2>
              Filler Card
            </h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
        </div>
        <!-- end of card -->
        <div class="card">
          <div class="card-body">
            <h2>
              Filler Card
            </h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
        </div>
        <!-- end of card -->
        <div class="card">
          <div class="card-body">
            <h2>
              Filler Card
            </h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
        </div>
        <!-- end of card -->
        <div class="card">
          <div class="card-body">
            <h2>
              Filler Card
            </h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
        </div>
        <!-- end of card -->
      </div>
    </div>
  </div>
</body>

TechQA.

scrollTop position incorrect when scrolling back to top of window

There are 1 answers

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Related Questions in SCROLLTOP

Related Questions in TRANSLATE3D

Popular Questions

Popular Tags

Trending Questions