當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

固定DIV不随滚动条滚动

發布時間：2024/4/13 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了固定DIV不随滚动条滚动小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?在項目開發中，有的頁面的某些按鈕，我們是不想讓他跟著滾動條滾動的，比如，添加頁面，有很長的內容添加，在往下滾動添加的過程中，我們始終想看到保存按鈕。OK！

????

  <!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"?"http://www.w3.org/TR/html4/loose.dtd">  <html>   <head>   ??<title>?New?Document?</title>   ??<meta?name="Generator"?content="EditPlus">   ??<meta?name="Author"?content="">   ??<meta?name="Keywords"?content="">   ??<meta?name="Description"?content="">   ????<style?type="text/css">   ????body{   ?????margin:0px;   ?????padding:0px;   ????}   ????#nav{position:fixed;?top:0;left:0;?width:100%;?background:#F00;}   ????</style>   </head>   <body>   <div>   ????<br/>xxxxxxxxx<br/>   ????<br/>xxxxxxxxx<br/>   ????<br/>xxxxxxxxx<br/>   ????<br/>xxxxxxxxx<br/>   ????<br/>xxxxxxxxx<br/>   ????<br/>xxxxxxxxx<br/>   ????<br/>xxxxxxxxx<br/>   ????<br/>xxxxxxxxx<br/>   ????<br/>xxxxxxxxx<br/>   ????<br/>xxxxxxxxx<br/>   ????<br/>xxxxxxxxx<br/>   ????<br/>xxxxxxxxx<br/>   ????<br/>xxxxxxxxx<br/>   ????<br/>xxxxxxxxx<br/>   ????<br/>xxxxxxxxx<br/>   ????<br/>xxxxxxxxx<br/>   ????<br/>xxxxxxxxx<br/>   ????<br/>xxxxxxxxx<br/>   ????<br/>xxxxxxxxx<br/>   ????<br/>xxxxxxxxx<br/>   ????<br/>xxxxxxxxx<br/>   ????<br/>xxxxxxxxx<br/>   ????<div?id="nav">   ????????效果   ????</div>   </div>   </body>   </html>   

? ? ? ? 我們看一下fixed屬性的說明：fixed總是以body為定位時的對象，總是根據瀏覽器的窗口來進行元素的定位，通過"left"、 "top"、 "right"、 "bottom" 屬性進行定位！ok！

????position:absolute，absolute是對網頁邊框而言的。

? ? ?如果，你用absolute加上js代碼也可以實現以上效果，但是你會發現隨著滾動條滾動時，那個層會晃來晃去，所以采用這種position:fixed，是可以使層固定不動的一種做法！

????我特意查了一下手冊，貌似在IE6一下版本不行！

? ? ok？

本文轉自小夜的傳說 51CTO博客，原文鏈接：http://blog.51cto.com/1936625305/1441433，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的固定DIV不随滚动条滚动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。