css position:fixed时还能水平滚动,如何实现

问题描述

css position:fixed时还能水平滚动,如何实现

css position:fixed时还能水平滚动,如何实现,或者是table里面的thead固定显示在最上面

解决方案

参见 http://www.jb51.net/article/47003.htm

解决方案二:

给容器增加scroll事件设置你的fixed对象的left属性为容器的-scrollLeft

固定table的表头

解决方案三:

fixed是相对于body的,给个DEMO你参考

 <style>
#fixed{position:fixed;left:0px;top:0px;border:solid 1px #000;width:100%;background:#fff}
</style>
<div id="fixed">fixed定位容器</div>
<div style="width:2000px;height:2000px">内容</div>
<script>
window.onscroll=function(){
var sl=-Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
document.getElementById('fixed').style.left=sl+'px';
}
</script>
aaaa
时间: 2016-10-14
Tags: position

css position:fixed时还能水平滚动,如何实现的相关文章

IE6下CSS position:fixed 的修正解法

IE6 不支援 CSS position:fixed 的 写法, 所以需要用其他写法达成. 网路上可以找到的解法非常多, 都列在下面的相关网页当参考资料, 有兴趣的在自行研究萝~ IE6 对於 CSS position:fixed 的修正解法 在此直接写我的作法:  代码如下 复制代码 #id_or_class_name {     position:fixed!important;     _position:absolute;     bottom:0;     /*_bottom:-20p

CSS{position:fixed}让HTML固定在浏览器的某个位置

文章简介:跨浏览器的CSS固定定位{position:fixed}. 不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉.当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{position:fixed}来实现的,通过它可以让HTML元素脱离文档流固定在浏览器的某个位置. IE7.Firefox.Opera,都支持CSS的{position:fixed},所以很容易实现(<详解定位与定位应用>) IE

css position:fixed固定定位div

先看IE7+.Firefox.Opera的代码:  代码如下 复制代码 <style type="text/css"> #backTop { position : fixed; bottom : 0 ; right:0;} </style> 在IE6中,需要一些CSS Hack来解决它,需要增加:  代码如下 复制代码 <!--[if IE 6]> <style type="text/css"> html {overf

CSS&amp;nbsp;position:fixed&amp;nbsp;for&amp;nbsp;IE

css  position:fixed; 是fixed的用法,配合overflow实现将一个元素固定定位到网页的一个位置上面Main CSShtml {background:#ccc;}body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow:auto; background:#ccc;}body {font-family: georgia, serif; font-size:12px;} #menu {disp

最好用也最简单的方法解决IE6不支持position:fixed问题

在网上找了很多方法,大多是 Javascript 解决的,想想能用 IE6 的电脑,得烂成啥样?再用expression eval ,估计还没滚动几下内存都不够了,所以这种能用 CSS 解决的问题最好都用 CSS 解决了. 前提是你的网页要支持 XHTML 在头部加上 [cc lang='html'] dir="ltr" lang="zh-CN"> [/cc] 然后针对 IE 6 进行如下设置: [cc lang='css'] * { margin:0; pa

css3 position fixed居中的问题

通常,我们要让某元素居中,会这样做: #element{ margin:0 auto; } 如果还想让此元素位置固定呢?一般我们会添加position:fixed,如下: #element{ position:fixed; margin:0 auto; } 但是这样做的结果就是,元素不居中了.这说明fixed使对象脱离了正常文档流. 解决方案: #element{ position:fixed; margin:0 auto; left:0; right:0; } 但是在IE7以下的版本中无法工作

IE7下当position:fixed遇到text-align:center

啥也不说,先看代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>IE7下当posit

使用CSS样式position:fixed水平滚动的方法

 这篇文章主要介绍了使用CSS样式position:fixed水平滚动的方法,需要的朋友可以参考下 使用CSS样式"position:fixed"可以使div块固定在一个固定位置,即使有滚动条也不会改变其位置.position:fixed给很多开发者带来了惊艳的效果,然而当出现水平滚动条时,效果就不那么容易接受了.有时候我们希望当出现水平滚动条时,div块可以随滚动条左右移动,实现垂直固定定位(fixed),水平相对定位(absolute).本文提供一个解决方法,附jquery扩展源码

使用CSS样式position:fixed水平滚动的方法_jquery

使用CSS样式"position:fixed"可以使div块固定在一个固定位置,即使有滚动条也不会改变其位置.position:fixed给很多开发者带来了惊艳的效果,然而当出现水平滚动条时,效果就不那么容易接受了.有时候我们希望当出现水平滚动条时,div块可以随滚动条左右移动,实现垂直固定定位(fixed),水平相对定位(absolute).本文提供一个解决方法,附jquery扩展源码. 本文的实现方式是使用js来控制div块随滚动条水平滚动,原理就是当window对象发生scrol