学做网站培训课程介绍

当前位置:

如何让DIV悬浮在滚动固定位置

div触顶固定悬浮在浏览器顶部就是某个版块,当浏览器拉动到这个DIV的位置时就会自动悬浮固定在浏览器顶部。如下图:

div触顶固定悬浮在浏览器顶部

下面学做网站论坛就来介绍一下如何实现div触顶固定悬浮在浏览器顶部效果。

方法/步骤

  1. 在代码顶部</head>标签上方引入JQUERY;引入方法见:网页如何引入JQuery
  2. 在需要触顶固定悬浮在浏览器顶部的DIV代码中添加一个ID代码
    
    
    id="pordAttr"
  3. 在代码底部</body>标签上面添加以下的JS代码,实现DIV触顶固定悬浮在浏览器顶部。
    
    
    <script type="text/javascript">
    $(function () {
    var elm = $('#pordAttr');
    var startPos = $(elm).offset().top;
    $.event.add(window, "scroll", function () {
    var p = $(window).scrollTop();
    $(elm).css('position', ((p) > startPos) ? 'fixed' : 'static');
    $(elm).css('top', ((p) > startPos) ? '0px' : '');
    });
    });
    </script>

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 在网站布局过程中,运用div+css的布局是特别有利的,通常我们需要对一个div层进行居中处理,那么如何通过css属性对它进行控制呢:下面分享一个建网页
  • 不是作业 但是找了下版块 不知道发那里 貌似只有这里特别合适。之所以决定自己写CSS 是由于看了建站课程里的DIV+CSS课程,为记忆CSS而作出的决定;另外
  • wordpress音乐插件介绍:这是一款简洁小巧的WordPress底部悬浮音乐播放器插件, 支持网易云音乐解析。可以实现在自己建网站时,放入海量的在线播放
  • 在之前的学做网站论坛的网站建设教程中,我们讲过网站怎么添加qq在线客服,这个教程主要介绍了如何制作PC网站的客服系统。例如学做网站论坛的在线客服
  • 我们在自己建网站时,由于网站版面幅度的限制,我们之前讲制作大型门户网站鼠标移动tab切换栏目,今天我们讲另一种突破网页限制的特效- div滚动到指定
  • 在我们实际自己做网站时,往往为了方便用户点击导航栏里的栏目,需要将自己网站的导航栏一直固定在顶部。即使用户将网页往下拉时,也一直在浏览器的顶
  • 对于很多制作企业网站的学员来说,少不了“联系我们”这一栏,对于大多数网站制作的学员来说,只会写公司名称,公司电话,公司地址之类,最多也只会加一