Неверная позиция scrollTop при прокрутке назад к верхней части окна

Я использую scrollTop, чтобы получить текущую позицию прокрутки внутреннего прокрутки div .content-inner. Отсюда я затем добавляю translate3d, чтобы изменить положение другого div .header-top, чтобы придать ему эффект анимации.

Проблема, с которой я столкнулся, заключается в том, что после прокрутки вверх на .content-inner позиция .header-top немного глючит, а не так, как она изначально располагалась.

В зависимости от скорости, которую я прокручиваю назад, также будет определяться, насколько изменится позиция. Я подозреваю, что это связано с выводом двойных отрицательных значений на translate3d, если вы проверите консоль.

См.: https://jsfiddle.net/ez379rax/5/

jquery html css scrolltop translate3d

19.01.2019 11:03

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

258

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.

— 20.01.2019 10:15

Не за что, рад, что был чем-то полезен :-)

— 21.01.2019 10:46

19.01.2019 13:13