基础知识：页面div始终浮在浏览器顶部
生活随笔
收集整理的這篇文章主要介紹了
基础知识：页面div始终浮在浏览器顶部
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
頁面div始終浮在瀏覽器頂部
<html>
<head><meta charset="utf-8"/><title>test</title><script type="text/javascript" src="/js/jquery/1.8.3/jquery.min.js"></script><style type="text/css">*{ margin:0; padding:0;}.ndiv{ width:200px; height:400px; border:1px solid #ccc;background: #f1f1f1;}.fix-div{ position:fixed; top:0px;}</style>
</head>
<body>
<div style="height: 700px;"></div>
<div id="mydiv" class="ndiv" >浮動</div>
<div style="height:2700px;"></div><script type="text/javascript">$.fn.fixedDiv = function(actCls){var pos = 0,that = $(this),topVal;if(that.length > 0){topVal = that.offset().top;}function fix(){pos = $(document).scrollTop();if (pos > topVal) {that.addClass(actCls);if (!window.XMLHttpRequest) {that.css({position: 'absolute',top : pos});}} else {that.removeClass(actCls);if (!window.XMLHttpRequest) {that.css({position: 'static',top : 'auto'});}}}fix();$(window).scroll(fix);}$('#mydiv').fixedDiv('fix-div');
</script>
</body>
</html>
轉載于:https://www.cnblogs.com/FallenAngle/p/7126415.html
總結
以上是生活随笔為你收集整理的基础知识：页面div始终浮在浏览器顶部的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 森罗可拉值得练吗?
- 下一篇： Arduino学习笔记1---开发环境搭