如何获得固定位置的 div 以随内容水平滚动？使用 jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4676131/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get a fixed position div to scroll horizontally with the content? Using jQuery
提问by jfeust
I have a div.scroll_fixed with the following CSS
我有一个带有以下 CSS 的 div.scroll_fixed
.scroll_fixed {
position:absolute
top:210px
}
.scroll_fixed.fixed {
position:fixed;
top:0;
}
I'm using the following jQuery code to set the .fixed class when the div reaches the top of the page.
当 div 到达页面顶部时，我使用以下 jQuery 代码来设置 .fixed 类。
var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
$('.scroll_fixed').addClass('fixed');
} else {
// otherwise remove it
$('.scroll_fixed').removeClass('fixed');
}
});
This works great for the vertical scroll fixing. But with a small browser window, horizontal scrolling causes a clash with content to the right of this fixed div.
这对于垂直滚动固定非常有用。但是对于一个小的浏览器窗口，水平滚动会导致与这个固定 div 右侧的内容发生冲突。
I would like the div to scroll with the content horizontally.
我希望 div 水平滚动内容。
Could anyone point me in the right direction. Still getting my feet wet with JS/JQuery.
谁能指出我正确的方向。仍然让我的脚湿了 JS/JQuery。
I basically want it to work like the second box in this example.
我基本上希望它像本示例中的第二个框一样工作。
采纳答案by Andrew Whitaker
The demo is keeping the element's position:fixedand manipulating the leftproperty of the element:
该演示保持元素的position:fixed并操作元素的 left属性：
var leftInit = $(".scroll_fixed").offset().left;
var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0));
$(window).scroll(function(event) {
var x = 0 - $(this).scrollLeft();
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
$('.scroll_fixed').addClass('fixed');
} else {
// otherwise remove it
$('.scroll_fixed').removeClass('fixed');
}
$(".scroll_fixed").offset({
left: x + leftInit
});
});
Using leftInittakes a possible left margin into account. Try it out here: http://jsfiddle.net/F7Bme/
使用leftInit考虑了可能的左边距。在这里试试：http: //jsfiddle.net/F7Bme/
回答by bigspotteddog
You have probably moved on by now, but here is an answer for anyone else looking for a horizontally scrollable fixed element solution. This jquery plugin was created to solve this exact problem.
您现在可能已经继续前进了，但这里是寻找水平滚动固定元素解决方案的其他人的答案。这个 jquery 插件是为了解决这个确切的问题而创建的。
This demo uses a shopping cart summary that will still scroll horizontally when fixed to the top of the page; and, I have also used it for a header above tabular data:
此演示使用购物车摘要，当固定到页面顶部时仍会水平滚动；而且，我还将它用于表格数据上方的标题：
Demo: http://jsfiddle.net/y3qV5/434/(updated)
演示：http: //jsfiddle.net/y3qV5/434/（更新）
Plugin and source: https://github.com/bigspotteddog/ScrollToFixed
插件和源码：https: //github.com/bigspotteddog/ScrollToFixed
Usage:
用法：
$(document).ready(function() {
$('#cart').scrollToFixed( { marginTop: 10 } );
});
回答by Konga Raju
use css property position:stickyto get it.
使用 css 属性position:sticky来获取它。
Here is the article explained and live demo.
这是文章解释和现场演示。
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
the only drawback is browser compatibility.
唯一的缺点是浏览器兼容性。
