滚动回窗口顶部时，scrollTop 位置不正确答案

【问题标题】：scrollTop position incorrect when scrolling back to top of window滚动回窗口顶部时，scrollTop 位置不正确
【发布时间】：2019-01-19 10:03:44
【问题描述】：

我正在使用 scrollTop 来获取内部滚动 div .content-inner 的当前滚动位置。从这里开始，我添加一个translate3d 来改变另一个div 的位置.header-top 给它一个动画效果。

我遇到的问题是在.content-inner 上向上滚动后，.header-top 的位置有点小故障，而不是它最初的位置。

根据我向上滚动的速度，也将确定位置变化的程度。如果您检查控制台，我怀疑这与 translate3d 上输出的双重负值有关。

见：https://jsfiddle.net/ez379rax/5/

【问题讨论】：

标签： jquery html css scrolltop translate3d

【解决方案1】：

是的，你是对的，问题是你到达顶部后计算中的负值。

我对代码进行了一些更改，删除了不必要的溢出，并捕获了窗口滚动事件。还使标题很好地适合容器内。

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>

【讨论】：

非常感谢！我最终选择了一条略有不同的路线，因此标题部分固定在顶部以显示另一个标题 - jsfiddle.net/ez379rax/9
没问题，我很高兴能帮上忙 :-)