试图让我的 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);
}
}
}
最佳答案
在您的情况下,使用 .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);
}
关于javascript - 在 Scroll 上移动 Div,然后停留在那里(水平粘条),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52996274/