javascript - 在 Scroll 上移动 Div，然后停留在那里(水平粘条)

Question

试图让我的 div 在滚动条上水平移动然后保持不动。我几乎拥有它，但无法弄清楚为什么定位不正确。请看看我的代码，请帮助我!注意“何时”和“是否”div，忽略第一部分。

https://codepen.io/pfbarnet/pen/bmOKxP

jQuery(document).ready(function() {

    var $w = $(window);
    var $d = $('#oh');
    var $e = $('#what');
    var $f = $('#how');
    var $g = $('#why');
    var $h = $('#when');
    var $i = $('#whether');

    var stickyHeaderTop = $('#when, #whether').offset().top;
    var lastScrollTop = $w.scrollTop();

    var _x = 0;
    var _y = 0;

    $(window).scroll(function(event) {
        var st = $w.scrollTop();

        _x = st;
        _y = st;
        lastScrollTop = st;

        $d.css('right', _x);
        $d.css('bottom', _y);

        $e.css('left', _x);
        $e.css('bottom', _y);

        $f.css('left', _x);
        $g.css('right', _y);

        if ( $(window).scrollTop() > stickyHeaderTop-100 ) {
            $('#whether').css({position: 'absolute', right: '300'});
            $('#when').css({position: 'absolute', left: '500'});
        }
        else {
            $i.css('right', _y);
            $h.css('left', _x);
        }
    }
}

Answer 1

在您的情况下，使用 .scrollLeft() 似乎不错。
https://api.jquery.com/scrollleft/

以下代码使用它并将 _x 设置为 .scrollLeft() 值。水平滚动时可以确认移动div。
代码笔:https://codepen.io/kuromoka/pen/oaJPxN

var $w = $(window);
var $d = $('#oh');
var $e = $('#what');
var $f = $('#how');
var $g = $('#why');
var $h = $('#when');
var $i = $('#whether');

var stickyHeaderTop = $('#when, #whether').offset().top;
var lastScrollLeft = $w.scrollLeft();
var lastScrollTop = $w.scrollTop();

var _x = 0;
var _y = 0;

$(window).scroll(function(event) {
  var sl = $w.scrollLeft();
  var st = $w.scrollTop();

  _x = sl;
  _y = st;
  lastScrollLeft = sl;
  lastScrollTop = st;

  $d.css('right', _x);
  $d.css('bottom', _y);

  $e.css('left', _x);
  $e.css('bottom', _y);

  $f.css('left', _x);
  $g.css('right', _y);

  if( $(window).scrollTop() > stickyHeaderTop-100 ) {
          $('#whether').css({position: 'absolute', right: '200'});
          $('#when').css({position: 'absolute', left: '500'});
  }
  else {
    $i.css('right', _y);
    $h.css('left', _x);
  }