`
fuerbosi
  • 浏览: 469658 次
文章分类
社区版块
存档分类
最新评论

Jquery实现相对浏览器位置固定、悬浮

 
阅读更多

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var stayBottom = function () {
///相对于浏览器的位置(浏览器的高度+滚动到上面看不到的高度-本身的高度=层顶部到浏览器最上面的高度)
var offsetTop = $(window).height() + $(window).scrollTop() - $("#bottomdiv").height() - 2 + "px";
//$("#bottomdiv").css("top", offsetTop);
$("#bottomdiv").animate({ top: offsetTop, "left": $(window).width() / 2 - $("#bottomdiv").width() / 2 }, { duration: 500, queue: false });
};
$(window).scroll(stayBottom).resize(stayBottom);//在浏览器滚动条变化或大小改变时调用
});
< /script>
< div id="bottomdiv" style="position: absolute; border-style: solid; border-width: thin;
border-color: Gray; height: 50px; bottom: 0;">
固定内容,实现层底部始终与浏览器底部相接,如果位置要往上移,offsetTop里面减去多少就是往上移多少,left里面加多少就是往右移多少
</div>

效果:


分享到:
评论

相关推荐

    jquery右侧跟随悬浮固定窗口

    【jQuery右侧跟随悬浮固定窗口】是一种常见的网页设计技术,它能提供用户友好的浏览体验,尤其是在长页面中,...通过学习和理解这些代码,你可以进一步掌握如何在实际项目中应用jQuery实现右侧跟随悬浮固定窗口的效果。

    jQuery页面滚动左侧悬浮固定层菜单代码

    在网页设计中,为了提供更好的用户体验,经常需要实现一种效果:当用户滚动页面时,某个元素(如侧边栏菜单)能始终保持在屏幕的某一位置,这种效果被称为“悬浮固定”或者“粘性定位”。jQuery作为一款强大的...

    jquery 悬浮 导航栏

    "jQuery 悬浮导航栏"是一种常见的网页交互效果,当用户滚动页面时,导航栏会固定在屏幕顶部,始终保持可见,提供便捷的导航。在本篇文章中,我们将深入探讨如何使用 jQuery 实现这一功能,以及其背后的原理和技术...

    jQuery响应式滚动收缩悬浮导航菜单代码下载。

    jQuery作为一款强大的JavaScript库,提供了丰富的功能和简单易用的API,使得实现响应式滚动收缩悬浮导航菜单变得相对容易。 **jQuery响应式滚动收缩悬浮导航菜单**是一种设计模式,当用户滚动页面时,菜单会根据...

    jQuery固定页面顶部导航菜单.zip

    本文将深入探讨如何使用jQuery实现一个固定在页面顶部的导航菜单,随着滚动条的移动,该菜单会自动悬浮并固定在顶部。我们将讨论jQuery的核心功能、如何与HTML和CSS协同工作,以及如何实现这个特定的导航菜单效果。 ...

    JS实现悬浮导航(实用)

    如果滚动位置超过了导航栏的初始位置,我们就将其设置为固定定位(`position: fixed`),并将其顶部位置设置为0,以保持在屏幕顶部。当用户向上滚动到导航栏回到其原始位置时,恢复到相对定位(`position: relative`...

    jquery获取html元素的绝对位置和相对位置的方法

    通过`.offset()`和`.position()`,你可以轻松获取元素的绝对位置和相对位置,结合CSS定位策略,实现各种复杂的布局和交互效果。在实际项目中,灵活运用这些知识可以大大提高开发效率和用户体验。

    Table 表格 表头表尾浮动显示

    这种实现相对简单,只需要处理一行表头的固定即可。 2. 多行固定:对于具有多级表头或者复杂结构的表格,可能需要将多行表头固定。这需要更复杂的CSS布局和JavaScript处理,例如使用嵌套的`position: fixed`元素,...

    超过一定高度出现左右浮动导航及底部固定导航代码悬浮漂浮

    总的来说,实现"超过一定高度出现左右浮动导航及底部固定导航代码悬浮漂浮"的技术核心在于利用CSS布局技巧(如浮动、绝对定位和固定定位),以及JavaScript或jQuery的滚动事件监听和动态修改样式。这种设计模式在...

    css+div悬浮.zip

    CSS中的定位主要有四种类型:static(静态定位)、relative(相对定位)、absolute(绝对定位)和fixed(固定定位)。在实现悬浮效果时,我们通常会使用`position: fixed;`,因为它可以使元素相对于浏览器窗口进行...

    底部悬浮通栏可以关闭广告位的实现方法

    将广告通栏设置为固定在浏览器底部,确保无论用户如何滚动页面,它都会保持在屏幕底部。同时,背景颜色应设置为黑色,并根据需要调整透明度,如`opacity: .7`或使用IE兼容性写法`filter:alpha(opacity=70)`。 代码...

    漂浮广告插件

    /* 使元素相对浏览器窗口定位 */ width: 300px; height: 250px; background-color: #fff; /* 其他样式 */ } ``` 3. **JavaScript 逻辑**:使用jQuery监听滚动事件,计算广告元素的新位置,确保它始终在屏幕...

    无需JS和jQuery代码实现CSS3鼠标浮动放大图片

    `.box`被设置为相对定位,并且设置了固定宽度和高度,这样可以限制图片的显示范围。`overflow: hidden`确保图片超出容器的部分不会显示,同时添加`cursor: pointer`属性,使鼠标光标在图片上变为手指形状,提示用户...

    悬浮窗口点击checkbox选中给text文本特效代码

    悬浮窗口可以通过相对或绝对定位实现,通常会添加CSS属性`position: fixed`使其保持在屏幕上的固定位置。窗口内部包含checkbox和相关的text元素。 2. **事件监听**:使用JavaScript或jQuery等库来监听checkbox的`...

    模仿微信官网页面布局

    元素按正常文档流排列)、`relative`(相对定位,相对于其原本位置进行偏移)、`absolute`(绝对定位,相对于最近的非`static`祖先元素定位)和`fixed`(固定定位,相对于浏览器窗口定位)。在模仿微信页面布局时,...

Global site tag (gtag.js) - Google Analytics