Переместите Divs на Scroll, а затем оставайтесь там (горизонтальная липкая полоса) - PullRequest
Новая
       16

Переместите Divs на Scroll, а затем оставайтесь там (горизонтальная липкая полоса)

0 голосов
/ 25 октября 2018

Пытаясь заставить мои дивы двигаться горизонтально на свитке, а затем оставаться на месте.У меня почти это есть, но я не могу понять, почему позиционирование отключено.Пожалуйста, посмотрите на мой код и, пожалуйста, помогите мне!Обратите внимание на «когда» и «ли» 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);
        }
    }
}

1 Ответ

0 голосов
/ 25 октября 2018

В вашем случае кажется целесообразным использовать .scrollLeft().
https://api.jquery.com/scrollleft/

. Следующий код использует его и устанавливает _x в значение .scrollLeft().Вы можете подтвердить перемещение divs при горизонтальной прокрутке.
codepen: 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);
  }
...