简体   繁体   English

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

[英]Css position fixed for horizontal scroll but scroll vertically

I have three div as 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 #left and #right fixed for horizontal scroll and scroll #center only. 现在我需要做的是保持#left#right固定为水平滚动并仅滚动#center This is working with css position:fixed for #left and #right . 这适用于css position:fixed#left#right But the problem is when i scroll html page vertically i need all the div's ie #left , #center and #right to scroll. 但问题是当我垂直滚动html页面时,我需要所有的div's#left#center#right来滚动。 This is not working. 这不起作用。 Please anyone help me how to do it so that #left and #right scrolls vertically along with #center and remains fixed for horizontal scroll. 请任何人帮我如何做到这一点,以便#left#right#center一起垂直滚动,并保持水平滚动固定。 I have no clue how to do it using css and make it work. 我不知道如何使用css并使其工作。

Try this link, it uses a plugin called scrollspy to do the stuff. 试试这个链接,它使用一个名为scrollspy的插件来完成这些工作。 Pretty easy... 相当容易...

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:x轴上的固定位置但不是y?

Thanks to semir.babajic : here is the actual snippet. 感谢semir.babajic :这是实际的片段。 You will need jQuery. 你需要jQuery。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM