学做网站培训课程介绍

当前位置:

如何让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 附件下载 (1155075 次浏览)
    本节建站课程高清视频下载链接: https://pan.baidu.com/s/1sl6nR8D 密码: urwgdiv+css就是把设计师设计好的图片,转变成一张静态页面的技术。html
  • 在网站布局过程中,运用div+css的布局是特别有利的,通常我们需要对一个div层进行居中处理,那么如何通过css属性对它进行控制呢:下面分享一个建网页
  • wordpress音乐插件介绍:这是一款简洁小巧的WordPress底部悬浮音乐播放器插件, 支持网易云音乐解析。可以实现在自己建网站时,放入海量的在线播放
  • 网站悬浮客服框制作代码用于制作网站的边栏悬浮客服框,代码由HTML、JS、CSS代码组成,可以制作出带有邮箱+电话+SKYPE+微信和向上置顶功能的边栏悬浮
  • 我们在自己建网站时,由于网站版面幅度的限制,我们之前讲制作大型门户网站鼠标移动tab切换栏目,今天我们讲另一种突破网页限制的特效- div滚动到指定
  • 在我们实际自己做网站时,往往为了方便用户点击导航栏里的栏目,需要将自己网站的导航栏一直固定在顶部。即使用户将网页往下拉时,也一直在浏览器的顶
  • 在网站制作时,往往需要在自己的网页上插入位置地图,方便用户查找公司位置。这时我们可以在网站上插入地图,并标注位置。效果如下图:那么如何