在桌面浏览器上，我可以使用以下javascript垂直修复元素，但仍允许水平滚动。如您所见，它会在每个滚动事件上重新定位元素。要查看我的意思，请尝试在此JSFiddle中水平和垂直滚动。
var verticallyFixedBox = document.getElementById('verticallyFixedBox');
window.addEventListener('scroll', function() {
verticallyFixedBox.style.top = '' + document.body.scrollTop + 'px';
});
然而，这种逻辑对于移动浏览器来说是失败的，因为移动浏览器显然不会在整个拖动完成之前进行绘制，从而导致体验不稳定。
什么是垂直修复元素的好方法，但仍允许移动浏览器进行水平滚动？
答案 0 :(得分：6)
如果您使用设置为height: 100%的容器框并将html和body元素的高度设置为100％，则可以使用position: absolute; top: 0;固定标题并为要垂直滚动的框设置overflow: auto（或scroll）。
请记住将您的正文和html边距设置为0以避免浏览器默认样式。
我已经更新了你的小提琴：http://jsfiddle.net/jb489ddL/1/
此解决方案根本不使用javascript，因此它可以在移动浏览器上运行，因为您不依赖于滚动事件。
答案 1 :(得分：6)
你可以用纯CSS做到。
#verticallyFixedBox {
position: sticky;
top: 0;
}
body {
margin: 0;
}
#verticallyFixedBox {
position: sticky;
top: 0;
background: #ccc;
border-bottom: 2px solid #000;
padding: 10px;
white-space: nowrap;
}<div id='verticallyFixedBox'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum nec sapien fermentum luctus. Fusce varius arcu ut nibh efficitur, quis euismod elit lobortis. Cras at fringilla lectus. Proin ac vulputate metus. Fusce eu mattis urna, at cursus elit. Aliquam erat volutpat. Ut tincidunt et lacus in faucibus. Donec et mi venenatis, condimentum urna vel, ultrices ante.
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum nec sapien fermentum luctus. Fusce varius arcu ut nibh efficitur, quis euismod elit lobortis. Cras at fringilla lectus. Proin ac vulputate metus. Fusce eu mattis urna, at cursus elit. Aliquam erat volutpat. Ut tincidunt et lacus in faucibus. Donec et mi venenatis, condimentum urna vel, ultrices ante.
</p>
<p>
Nunc non turpis non orci consectetur bibendum eget vitae urna. Nulla dictum, orci sit amet luctus consectetur, nisi nisl rutrum sapien, ut fermentum urna dui a ipsum. Mauris commodo convallis mi, sed ullamcorper enim mollis eget. Maecenas risus felis, lobortis eu interdum elementum, facilisis a justo. Ut semper velit at enim convallis mollis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis a orci magna. Duis blandit orci ac fermentum auctor. In hac habitasse platea dictumst. Aliquam sit amet molestie felis, et congue purus. Proin porta mauris sed tincidunt ultrices. Curabitur tristique felis ac sodales aliquet.
</p>
<p>
Etiam placerat lorem non sem feugiat, non tristique neque maximus. Maecenas ultrices scelerisque ante, ut bibendum nunc tincidunt maximus. Proin placerat tincidunt quam in scelerisque. Sed nunc tortor, ultricies ut tincidunt eu, molestie id nunc. Nam nisl mauris, scelerisque at pharetra vitae, lacinia vitae sapien. Etiam sollicitudin eget magna ornare eleifend. Praesent molestie quam a mollis accumsan.
</p>
<p>
Nullam gravida, est ac gravida vulputate, nibh quam bibendum nisl, et posuere eros enim ac ante. Nullam eu tortor vel dui aliquam mattis non a mi. Sed porttitor sem id purus efficitur, at maximus nisi placerat. Integer imperdiet quam a risus varius, feugiat commodo diam dictum. Donec ac viverra risus. Duis rhoncus mi sit amet augue malesuada, et tincidunt magna aliquet. Phasellus fermentum lorem vel ullamcorper commodo. Proin laoreet feugiat ullamcorper. Mauris auctor leo eu imperdiet consectetur. Donec et diam vel ligula elementum consequat. Pellentesque nisl urna, sagittis iaculis venenatis non, varius non nibh.
</p>
<p>
Mauris fermentum eros quis metus tempor venenatis. Suspendisse est nisl, finibus sit amet malesuada vel, pharetra eget neque. Curabitur malesuada non nibh eu pellentesque. Aenean ultrices ante sed lorem rhoncus, ac volutpat urna condimentum. Mauris tincidunt mauris et pretium pellentesque. Sed viverra arcu at risus tempor, sed mattis ex maximus. Proin euismod feugiat tortor sit amet semper. Duis ornare finibus nunc at commodo. Suspendisse dignissim metus quis facilisis vulputate. Nunc eu ultricies leo. Morbi cursus id justo eget tempus. In hac habitasse platea dictumst. In tempor, libero sed ullamcorper aliquam, elit libero mattis magna, sit amet tincidunt mi tellus eu purus. Aenean sed velit nunc. Nunc quis lobortis enim, non sodales neque.
</p>
请注意，并非所有浏览器都支持sticky positioning。
答案 2 :(得分：3)
使用position：fixed时实际上需要JavaScript;但只能实现水平滚动部分。 我更新了我的小提琴，因此它也提供了水平滚动。
我所做的是保持verticalFixedBox的位置：固定在其位置，但添加另一个具有相同内容的div，但不透明度为0.01，position：absolute;保留水平滚动条。
像这里：http://jsfiddle.net/8jzhtg9w/7/
HTML：
<div id='verticallyFixedBox'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum nec sapien fermentum luctus. Fusce varius arcu ut nibh efficitur, quis euismod elit lobortis. Cras at fringilla lectus. Proin ac vulputate metus. Fusce eu mattis urna, at cursus elit. Aliquam erat volutpat. Ut tincidunt et lacus in faucibus. Donec et mi venenatis, condimentum urna vel, ultrices ante.
</div>
<div class='scroller'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum nec sapien fermentum luctus. Fusce varius arcu ut nibh efficitur, quis euismod elit lobortis. Cras at fringilla lectus. Proin ac vulputate metus. Fusce eu mattis urna, at cursus elit. Aliquam erat volutpat. Ut tincidunt et lacus in faucibus. Donec et mi venenatis, condimentum urna vel, ultrices ante.
</div>
<div id='padder'></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum nec sapien fermentum luctus. Fusce varius arcu ut nibh efficitur, quis euismod elit lobortis. Cras at fringilla lectus. Proin ac vulputate metus. Fusce eu mattis urna, at cursus elit. Aliquam erat volutpat. Ut tincidunt et lacus in faucibus. Donec et mi venenatis, condimentum urna vel, ultrices ante.
</p>
<p>
Nunc non turpis non orci consectetur bibendum eget vitae urna. Nulla dictum, orci sit amet luctus consectetur, nisi nisl rutrum sapien, ut fermentum urna dui a ipsum. Mauris commodo convallis mi, sed ullamcorper enim mollis eget. Maecenas risus felis, lobortis eu interdum elementum, facilisis a justo. Ut semper velit at enim convallis mollis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis a orci magna. Duis blandit orci ac fermentum auctor. In hac habitasse platea dictumst. Aliquam sit amet molestie felis, et congue purus. Proin porta mauris sed tincidunt ultrices. Curabitur tristique felis ac sodales aliquet.
</p>
<p>
Etiam placerat lorem non sem feugiat, non tristique neque maximus. Maecenas ultrices scelerisque ante, ut bibendum nunc tincidunt maximus. Proin placerat tincidunt quam in scelerisque. Sed nunc tortor, ultricies ut tincidunt eu, molestie id nunc. Nam nisl mauris, scelerisque at pharetra vitae, lacinia vitae sapien. Etiam sollicitudin eget magna ornare eleifend. Praesent molestie quam a mollis accumsan.
</p>
<p>
Nullam gravida, est ac gravida vulputate, nibh quam bibendum nisl, et posuere eros enim ac ante. Nullam eu tortor vel dui aliquam mattis non a mi. Sed porttitor sem id purus efficitur, at maximus nisi placerat. Integer imperdiet quam a risus varius, feugiat commodo diam dictum. Donec ac viverra risus. Duis rhoncus mi sit amet augue malesuada, et tincidunt magna aliquet. Phasellus fermentum lorem vel ullamcorper commodo. Proin laoreet feugiat ullamcorper. Mauris auctor leo eu imperdiet consectetur. Donec et diam vel ligula elementum consequat. Pellentesque nisl urna, sagittis iaculis venenatis non, varius non nibh.
</p>
<p>
Mauris fermentum eros quis metus tempor venenatis. Suspendisse est nisl, finibus sit amet malesuada vel, pharetra eget neque. Curabitur malesuada non nibh eu pellentesque. Aenean ultrices ante sed lorem rhoncus, ac volutpat urna condimentum. Mauris tincidunt mauris et pretium pellentesque. Sed viverra arcu at risus tempor, sed mattis ex maximus. Proin euismod feugiat tortor sit amet semper. Duis ornare finibus nunc at commodo. Suspendisse dignissim metus quis facilisis vulputate. Nunc eu ultricies leo. Morbi cursus id justo eget tempus. In hac habitasse platea dictumst. In tempor, libero sed ullamcorper aliquam, elit libero mattis magna, sit amet tincidunt mi tellus eu purus. Aenean sed velit nunc. Nunc quis lobortis enim, non sodales neque.
</p>
CSS：
#verticallyFixedBox {
background: #ccc;
border-bottom: 2px solid #000;
left: 0;
padding: 10px;
position: fixed;
top: 0;
white-space: nowrap;
}
.scroller {
opacity:0.01;
position:absolute;
white-space: nowrap;
padding: 10px;
top:0px;
left:0px;
}
#padder {
height: 30px;
}
JavaScript的：
$(window).scroll(function() {
$('#verticallyFixedBox').css({
'left': -1 * $(this).scrollLeft()
});
});
唯一的问题：opera-mini似乎不支持这个位置：固定功能： http://caniuse.com/#feat=css-fixed
答案 3 :(得分：2)