查看效果： http://www.neixun360.com/eg/eg1/demo.htm
<!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>
<meta content="div,先浮动,后固定" name="description">
<meta content="div,先浮动,后固定" name="keywords">
<title>div,先浮动,后固定</title>
<style>
*{margin:0;padding:0;}html,body{_height:100%;_overflow:hidden;}body{_overflow:auto;font-family:Arial,sans-serif;font-size:14px;background:#f4f4f4;color:#333;text-shadow:1px 1px 1px #fff;}#header{position:fixed;_position:absolute;left:0px;text-align:center;display:block;height:35px;clear:both;background:#000;margin-bottom:30px;border-bottom:7px solid #ccc;font-size:14px;line-height:35px;text-align:right;font-style:italic;width:100%;}#header a{color:#aaa;text-shadow:1px 1px 1px #000;padding:0px 20px;outline:none;}#header a:hover{color:#fff;}#header a.back{color:#1B80B5;font-weight:bold;display:block;float:right;}#header a.back:hover{color:#fff;}.left{float:left;}.right{float:right;}h1{font-size:42px;font-family:'Cantarell';font-weight:100;letter-spacing:-1px;}h2{font-size:20px;text-indent:4px;font-weight:normal;font-style:italic;color:#a1a1a1;padding:5px 0px 20px 0px;}h2 span{color:#444;}a{color:#777;text-decoration:none;}a:hover{color:#222;}p{padding:5px 0px;}.content{padding:70px;padding-top:200px;width:80%;margin:0 auto;}#footer{position:fixed;_position:absolute;background:#eee;left:0px;width:100%;height:50px;line-height:50px;bottom:0;background:#f0f0f0;border-top:7px solid #ccc;text-align:center;text-shadow:1px 1px 1px #000;color:#fff;background:#000;}
#footer a{color:#aaa;padding:0px 10px;text-shadow:1px 1px 1px #000;}#footer a:hover{color:#fff;text-shadow:0px 0px 1px #fff;}#header{top:0;}#wrapper {overflow: hidden;}
#contentn {width:555px; margin-right:10px; float:left; min-height:1200px;}#sidebar {width:284px; padding:10px; background: #ccc; float:right; height:400px;}
#portamento_container {float:right; position:relative;} /* take the positioning of the sidebar, and become the start point for the sidebar positioning */
#portamento_container #sidebar {float:none; position:absolute;} /* no need to float anymore, become absolutely positoned */
#portamento_container #sidebar.fixed {position:fixed;} /* if the panel is sliding, it needs position:fixed */
</style>
</head>
<body>
<div class="content">
<div id="wrapper">
<div id="contentn">
<h2><a href="http://site518.net/dd/"><b>div,先浮动,后固定</b></a></h2>
<br/><br/>
<p><img src="g.jpg"></p>
<p><img src="n.jpg"></p>
</div>
<div id="sidebar">
<p><img src="360.jpg"></p>
</div>
</div>
</div>
<div id="footer">
</div>
<script src="jquery.min.js"></script>
<script src="portamento.js"></script>
<script>
$('#sidebar').portamento();
</script>
</body>
</html>
查看效果： http://www.neixun360.com/eg/eg1/demo.htm
分享到：
相关推荐
jquery.floatdiv 浮动层固定位置 /*说明：可以让指定的层浮动到网页上的任何位置，当滚动条滚动时它会保持在当前位置不变，不会产生闪动*/ /*调用： 1 无参数调用：默认浮动在右下角 $("#id").floatdiv(); 2 内置...
本主题将深入探讨如何使用jQuery实现一个可拖动并可固定在页面上的浮动DIV元素。 首先，让我们理解“浮动DIV”。在HTML中，浮动（float）属性常用于布局，使元素可以向左或向右移动，以便其他内容可以环绕它。在CSS...
很好的div浮动层显示,一些下拉改为透明的浮动层，便于做查询等功能
附带完整的例子,对js完全不会的人也可以轻松使用,只要把例子中的js引用语句复制过去(地址当然要重新设定),然后把函数 ... $("#compore").floatdiv({left:"10px",top:"100px"}); }); 中10px和100px改成想要的数字就ok
在网页设计中，"div跟随固定在浏览器左边，上下不浮动，左右可跟随主体浮动"是一种常见的布局技巧，主要用于创建侧边栏或者导航菜单。这种布局模式可以使元素在页面滚动时始终保持在用户视野的左侧，提供持续的导航...
标题中的“jQuery插件实现DIV浮动在页面固定位置中”是指使用JavaScript库jQuery来创建一个功能，使得HTML中的<div>元素能保持在用户滚动页面时的特定位置，通常这种效果被称为“固定定位”或者“吸附效果”。...
在实现浮动DIV效果时，我们通常会为侧边栏或者工具栏设置`float:left`或`float:right`，使其在页面滚动时保持固定位置。 接下来，我们考虑PHP插件的应用。在这个场景中，提及的“类新浪浮动DIV效果demo”可能是一个...
3. **判断条件**：检查div距离顶部的距离是否小于视口高度，如果是，则应用定位使其固定在底部。这通常通过改变`position`属性为`fixed`，并设置`bottom`属性为0来实现。 4. **关闭按钮**：如果文件名包含“关闭按钮...
为了使div浮动，可以设置`position`属性为`fixed`，并指定相对于屏幕的`top`和`right`（或`bottom`和`left`）值。例如： ```css #floatingCart { position: fixed; top: 20px; /* 距离顶部的距离 */ right: 20...
浮动层是指在网页上始终显示在某一固定位置的元素，不论用户滚动页面，它都会保持在屏幕的某个角落，如左侧或右侧。这种设计提高了用户体验，因为用户无需寻找联系方式，只需瞥一眼就能看到在线客服入口。 实现这样...
通过这样的实现，我们可以创建一个浮动且在页面滚动时始终保持可见的Div。在实际应用中，可能还需要考虑不同浏览器的兼容性问题，以及优化性能，避免频繁的DOM操作。 文件列表中的`悬浮DIV.html`很可能是包含上述...
### 浮动div代码解析与应用 在网页设计与开发中，浮动窗口或浮动层是一种常见的交互元素，常用于广告、在线客服、悬浮菜单等场景。通过使用`div`元素结合CSS定位属性和JavaScript，可以实现div在网页中的动态位置...
这款基于jQuery的插件允许开发者实现div元素在页面滚动时保持在特定位置的效果，如固定侧边栏、顶部导航或者浮动按钮。这种布局方式能够确保关键信息始终可见，提高用户交互性。 首先，我们要理解jQuery库。jQuery...
为了解决这个问题，我们可以采用CSS和jQuery来实现表头的固定显示，即使在内容滚动时，表头依然可见，提高用户体验。 首先，我们需要了解CSS中的定位技术。在CSS中，可以使用`position`属性来改变元素的定位方式。...
3. **定位（Positioning）**：要使提示层在网页的右下角浮动，我们需要使用CSS的`position`属性设置为`fixed`，这样元素将相对于浏览器窗口定位，即使滚动页面也会保持在固定位置。 4. **浮動（Float）**：虽然通常...
在CSS中，浮动是一种布局机制，允许元素脱离其正常文档流，并向左或向右移动，直到其边缘碰到包含框或另一个浮动元素的边缘。这通常用于创建多列布局或使文本环绕图片。 HTML侧边栏的实现通常涉及以下步骤： 1. **...
在网页设计中，"浮动div"是指通过CSS的`float`属性来使一个或多个div元素在页面上浮动，以实现特定布局效果。这个技术在早期网页设计中非常常见，用于创建多列布局或者使元素在文本中环绕。在本案例中，"页面两边滚...
在本主题“CCS固定位置，DIV固定位置”中，我们将深入探讨如何使用CSS来实现元素在页面上的固定定位，特别是关于`div`元素的固定定位。 首先，理解CSS的定位模式是关键。有四种基本的定位方式：正常流（Normal Flow...
网页局部div随滚动条置顶滚动是一种常见的网页交互设计，常用于新闻网站、电商页面或者任何需要突出显示特定内容的场景。这种效果使得用户在滚动页面时，某个div元素（通常包含重要信息或导航）始终保持在视口顶部，...
在Web开发中，让一个DIV元素始终浮动在页面底部是一个常见的需求，尤其在制作页脚信息或者导航菜单时。页面底部的元素通常需要随着页面滚动而保持在窗口的底部，而不是随着页面内容的滚动而移动。实现这一效果可以...