热文一本正经

网页div跟随屏幕滚动

有的网页上会有导航条或者广告层随着屏幕滚动,当所在层还没到屏幕边缘的时候,层还是在原来位置,到达屏幕边缘时就会随着屏幕滚动,参考示例:

网页div跟随屏幕滚动

实现方法也挺简单,在模板header文件中插入以下代码:

<!--跟随屏幕滚动开始-->
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script src="/static/js/posfixed.js"></script>
<script>
    $(function(){
    $('.in_gd1').posfixed({
    distance : 0,
    pos : 'top',
    type : 'while',
    hide : false
    });
    });
</script>
<!--跟随屏幕滚动结束-->

其中

$('.in_gd1').posfixed({

这里的in_gd1为滚动层的css样式名称,确保此样式只有要滚动的层使用,否则可能出现错乱
Tips:用div的id替代class是个不错的主意

适用范围:

导航条、页面广告

可能遇到的问题:

代码需要调用jquery.min.js,如果原网页上有这个js可能会引起冲突。

非特殊说明,本博所有文章均为博主原创,并遵循 CC-BY-NC-SA 4.0 协议许可。
转载前请务必署名,本文链接:https://www.geniusxiaoshuai.com/exp/46.html
-- 展开阅读全文 --
emlog修改代码高亮
« 上一篇 04-17
firefox更新后在密码输入框内提示“此链接不安全”
下一篇 » 04-19

发表评论

作者信息

热门文章

标签TAG

热评文章