分享程序员开发的那些事...
更新时间：2022-09-18 14:36:02
在自己建站的过程中，要实现一个div随滚动条浮动的效果，网上找了些示例不太好用，还是自己动手，丰衣足食，写的不好请大家谅解，毕竟我不是搞前端的，因为自己建站毕竟每一步都必须自己来，这边只是做个记录。
实现浮动主要有个css属性：position:fixed，从单词上就知道是固定的意思，这边就用我博客的公告栏做个示例：
上面是从博客园中复制下来的代码，放到本地自己调试，当然大家可以看到好的页面或者效果，可以搞下来研究。上面的效果可以看出样式中加了个position:fixed;属性，公告栏不随着滚动条的滚动而变化位置，其实这个效果也可以满足一些需求。这个默认固定在左上部，我们需要定位在右上部加个right:10px;属性即可：
我们见到有的网站上面的导航条随着滚动条固定在顶部，就是这种方法实现，对于不搞前端的来说可能觉得很难，其实就这么简单。
不要高估别人，低估自己，其实深入内心，很多你自以为很了不起的人，其实也没什么，真是这样。
有点跑偏啊，只是多想了点，对于一些你不曾接触到的领域，觉得很遥远，接触了，你会发现，其实也就这样。
有时候有这种情况：在指定的地方浮动和不浮动，这种情况只是上面的position:fixed属性就实现不了了，要结合滚动条滚动事件scroll，使用scroll事件需要注意要结合一些属性和方法。
关于scroll的一些方法和属性不止这些，上面三个是我们要用到的，关于其他的大家可以搜下相关解释，我们看下实现代码。
样式代码和html代码：
js代码：
1 $(function () { 2 $(window).scroll(function () { 3 var ref_min = $("#floatdiv")[0]; 4 if (!ref_min) return; 5 var scroll_top = $(window).scrollTop(); 6 var ref_height_min = ref_min.offsetTop + $("#floatdiv")[0].offsetHeight; 7 if (scroll_top > ref_height_min) { 8 $("#floatdiv").addClass("canfloat"); 9 } else { 10 $("#floatdiv").removeClass("canfloat"); 11 } 12 }); 13 });
scroll_top获取当前滚动条滚动的距离，ref_height_min是开始浮动的距离，大于的话就开始浮动，小于的话就不浮动，代码看起来是没什么问题，我们看下运行效果：
上面的效果基本上没什么问题，但是仔细看下就会发现，浮动框在不该浮动的地方浮动，在该浮动的地方浮动，好像是距离的判断出现问题，问题出在哪？就在ref_min.offsetTop这句代码，如果我们实现的是从顶部开始滚动，这段代码是不会出现问题的，因为ref_min.offsetTop始终保持一致（如果设置浮动框和开始浮动宽的距离顶端高度设置一样），如果不从顶端开始浮动，当开始浮动的时候，浮动框距离顶部的值是一定的，我们想要的应该是变化的，所有就会出现上面的问题。
解决上面的问题其实很简单，就是不用浮动框获取距离顶端的高度，用一个标记来记录，我们修改一下上面的代码：
html代码：
js代码：
1 $(function () { 2 $(window).scroll(function () { 3 var ref_min = $("#sign")[0]; 4 if (!ref_min) return; 5 var scroll_top = $(window).scrollTop(); 6 var ref_height_min = ref_min.offsetTop + $("#floatdiv")[0].offsetHeight; 7 if (scroll_top > ref_height_min) { 8 $("#floatdiv").addClass("canfloat"); 9 } else { 10 $("#floatdiv").removeClass("canfloat"); 11 } 12 }); 13 });
上面的html只是浮动框上部加了个div标记来记录浮动高度，var ref_min = $("#sign")[0];获取的是标记的浮动高度，而不是浮动框的浮动高度。这样基本上可以解决上面出现的问题，我们看下运行效果：
完整代码：
示例下载：scrollTop.rar
本文转自田园里的蟋蟀博客园博客，原文链接：http://www.cnblogs.com/xishuai/p/3586708.html，如需转载请自行联系原作者