Question

试图让我的div在滚动上水平移动，然后保持原状。我几乎拥有它，但无法弄清楚为什么关闭了位置。请看一下我的代码，请帮帮我！注意“何时”和“是否” div，请忽略第一部分。

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);
  }

在Scroll上移动Divs，然后停留在此处（水平粘贴条）

1 个答案: