js页面滚动浮动层智能定位(jQuery)实现

  1. ///js页面滚动浮动层智能定位(jQuery)实现
  2. ///调用:$("#popfloat").smartFloat($("#mainInfo").width() + 21);
  3. $.fn.smartFloat = function(width_p) {
  4. var position = function(element) {
  5. var top = element.position().top, pos = element.css("position");
  6. $(window).scroll(function() {
  7. var scrolls = $(this).scrollTop();
  8. if (scrolls > top) {
  9. if (window.XMLHttpRequest) {
  10. element.css({
  11. position: "fixed",
  12. width: width_p,
  13. top: 0
  14. });
  15. } else {
  16. element.css({
  17. top: scrolls
  18. });
  19. }
  20. } else {
  21. element.css({
  22. position: "", //absolute
  23. top: top
  24. });
  25. }
  26. });
  27. };
  28. return $(this).each(function() {
  29. position($(this));
  30. });
  31. };
时间: 2024-10-08 08:22:28

js页面滚动浮动层智能定位(jQuery)实现的相关文章

js页面滚动时层智能浮动定位实现:

案例展示: 第一个:每个人都有看过的淘宝页面: 案例就不多说了,有兴趣的可以多去找找, 这样的智能浮动效果还是不错的,挺方便. 基本的实现原理: 首先有一个默认状态就是没有滚动的时候,什么事情也不用做,定位可以是absolute,也可以是stati,fixed,relartive 这些都可以.我们主要需要关注的是当浏览器滚动的时候,(要浮动的块)要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了.最好的position属性就是fixed了,可以在IE6+和其

Javascript页面滚动时导航智能定位

常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域. 假设结构如下: <div class="container"> <div class="wrapper"> <div class="section" id="section1">section1</div> <di

Javascript实现页面滚动时导航智能定位

遇到的问题: 在做官网的时候,需要滚动定位的区块的图片不确定,无法确定用户浏览区域对应的模块导航 之前的解决方案是: 通过定位滚动条的位置来判断用户浏览区域对应的模块导航,这种方法的弊端是,区块的高度不确定时就无法计算滚动条的位置来判断: 优化方案: 页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域. 以下是DEMO <!-- html --><div class="container">

JS-JQ实现页面滚动时元素智能定位(顶部-其他部位)

  阅读前提:充分理解div的三种定位方式:浮动,相对定位,绝对定位 方法一(顶部)      原理:直接使用css 进行控制:缺点:不兼容ie6-:      实现:position:fixed; top:0 方法二(顶部)      原理:获取页面被卷曲的高度(LEN),复制给 obj.STYLE.TOP=LEN,缺点,效果不是很流畅!      实现:      var len=document.documentElement.scrollTop||document.body.scroll

scrollReveal.js页面滚动动态效果

scrollReveal.jshttp://www.dowebok.com/134.html简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球.不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次:WOW.js 依赖 animate.css,而 scrollReveal.js 不依赖其他任何文件. 虽然 scrollReveal.js 不依赖 anim

jquery.smint.js 页面菜单浮动之谷歌浏览器异常

jquery.smint.js 做公司项目时,谷歌测试,页面向下拉,刷新后,导航栏菜单与顶部距离发生变动,并不在设置的relative元素top下固定像素 我的relative元素的高为80,然后在js判断中多加了一个条件 stickyTop <=80 完美解决了

js 页面滚动到指定位置

项目中,本来想通过点击左侧列表让页面进行快速导航(根据 id="item" 和 a标签的 href 属性[<a href="#item"></a>]),不过滚动后的页面一直是顶在浏览器页面顶部的,不符合项目需求,所以就通过 js 代码让页面进行指定位置滚动,代码如下: $(".left_nav>ul>li").click(function () { var n = parseInt($(this)[0].id)

jQuery实现页面滚动时智能浮动定位

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>jQuery实现页面滚动时层智能浮动定位_前端开发</title>    <style type="text/css">        * { 

jquery页面滚动显示浮动菜单栏锚点定位效果

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>jQuery