Javascript CSS 位置固定为水平滚动但垂直滚动

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14274841/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 16:14:30  来源:igfitidea点击:

Css position fixed for horizontal scroll but scroll vertically

javascriptjquerycss

提问by user850234

I have three divas below :

我有div以下三个:

<div id="left"></div>
<div id="center"><table></table></div>
<div id="right"></div>

Now what i need to do is to keep #leftand #rightfixed for horizontal scroll and scroll #centeronly. This is working with css position:fixedfor #leftand #right. But the problem is when i scroll html page vertically i need all the div'si.e. #left,#centerand #rightto scroll. This is not working. Please anyone help me how to do it so that #leftand #rightscrolls vertically along with #centerand remains fixed for horizontal scroll. I have no clue how to do it using css and make it work.

现在我需要做的是仅保留#left#right固定水平滚动和滚动#center。这与 css position:fixedfor #leftand 一起使用#right。但问题是,当我滚动的HTML页面垂直我需要所有的div's#left#center#right滚动。这是行不通的。请任何人帮助我如何做到这一点,#left#right#center水平滚动一起垂直滚动并保持固定。我不知道如何使用 css 来完成它并使其工作。

回答by ATOzTOA

Try this link, it uses a plugin called scrollspyto do the stuff. Pretty easy...

试试这个链接,它使用一个插件scrollspy来做这些事情。挺容易...

http://www.rickyh.co.uk/css-position-x-and-position-y/

http://www.rickyh.co.uk/css-position-x-and-position-y/

Also, see this SO question: CSS: fixed position on x-axis but not y?

另外,请参阅这个问题:CSS: fixed position on x-axis but not y?

Thanks to semir.babajic: here is the actual snippet. You will need jQuery.

感谢semir.babajic:这是实际的片段。您将需要 jQuery。

$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + 15 //Always 15px from left
    });
});