2013-02-13 130 views
0
#bottom_fade { 
      position: absolute; 
      bottom: 0; 
      width: 100%; 
      background: url("bottom-fade.png"); 
      background-repeat:repeat-x; 
      height: 400px; 
      z-index: 2; 
      } 
     .categories { 
      position: absolute; 
      left: 50%; 
      color:black; 
      word-wrap: break-word; 
      font-family: 15px 'Libre Baskerville', serif; 
      margin-left: -200px; 
      z-index: 1; 
      } 
     .categories td { 
      width: 200px; 
      } 

您可能会看到上述代码here的结果。 尝试调整浏览器窗口的大小,以便强制滚动以查看表格中的全部文本。防止CSS页脚滚动

当您滚动时,您可能会看到#bottom_fade不会粘在页面的底部,而是会跟随您的滚动。我不希望发生这种情况:无论滚动条发生什么,我怎么能说bottom_fade总是保持连接到浏览器窗口的底部?

非常感谢!

+1

这是不相关的,但可以考虑设置'指针的事件:在您的页脚none',它中断文本选择,请参见:[点击通过DIV到底层元素( http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements) – MikeM 2013-02-13 21:13:59

+0

哦!多亏了很多人,甚至没有考虑到这一点。我会添加它! – Saturnix 2013-02-13 21:22:59

回答

5

变化

#bottom_fade { 
     position: absolute; 
} 

#bottom_fade { 
     position: fixed; 
}; 

,它应该工作就像一个魅力。

(顺便说一句不错的效果!)

+0

+1并感谢您的回答。但是,现在您的解决方案滚动条不显示(我正在使用Safari)。有什么办法可以在保持效果的同时滚动桌面吗?我在很多网站上看到了这个... – Saturnix 2013-02-13 21:25:49

+1

嗯,这很奇怪,它似乎在Firefox上工作。你确定你把固定在正确的元素? (在你的网站上,我注意到你把#分类的位置固定在......) – Pbirkoff 2013-02-13 22:17:38

+0

我是个白痴。我改变了错误的选择器,现在它工作正常。谢谢! – Saturnix 2013-02-13 23:42:17