固定位置不适用于我的用例,因为它固定在浏览器窗口上,您可能会处于文本在屏幕右侧之外且无法到达的状态。无论如何,我尝试使用绝对定位,然后调整javascript中的“顶部”。它在 Firefox 和 Chrome 中运行良好,但在 Safari 中滚动时内容会抖动。
http://jsfiddle.net/Z8UFE/4/ http://jsfiddle.net/Z8UFE/4/
<div class="fixed sticky" data-offset-top="50"><p>fixed</p></div>
$(document).ready(function() {
var documentHeight = $(document).height();
$(document).scroll(function() {
var scrollTop = $(window).scrollTop();
$(".sticky").offset(function() {
$this = $(this);
var offsetTop = $this.data("offset-top");
if (scrollTop < 0) {
scrollTop = 0;
}
var newTop = offsetTop + scrollTop;
if (newTop < offsetTop) {
newTop = offsetTop;
}
// Prevents document from infinitely expanding.
var maxTop = documentHeight - $this.height();
if (newTop > maxTop) {
newTop = maxTop
}
// Prevents a bit of jitter since the current offset can be
// not precisely the initial offset. 338 Vs. 338.12931923
var currentTop = $this.offset().top;
if ( Math.abs(currentTop - newTop) >= 1 ) {
return { top: newTop }
} else {
return {}
}
});
});
})
我想我明白你想要实现的目标。
如果您保持元素上的固定定位并使用 javascript/jquery 重新水平定位它,您可以保持平滑的垂直滚动并允许它也保持其水平定位:
$(function() {
var $sticky = $('.sticky');
var target = 800;
$(document).scroll(function() {
var left = $(window).scrollLeft();
var adj = target - left;
$sticky.css({left: adj});
});
});
这使用向左滚动() http://api.jquery.com/scrollleft/这是与scrollTop()相对应的水平方向
http://jsfiddle.net/Z8UFE/18/ http://jsfiddle.net/Z8UFE/18/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)