零基础学做网站培训介绍

当前位置:

如何让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 滚动到顶部固定(附代码)

如何将网站导航栏固定在顶部(jquery固定导航栏)

发表评论

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

相关教程

  • 在我们实际自己做网站时,往往为了方便用户点击导航栏里的栏目,需要将自己网站的导航栏一直固定在顶部。即使用户将网页往下拉时,也一直在浏览器的顶
  • 我们在自己建网站时,由于网站版面幅度的限制,我们之前讲制作大型门户网站鼠标移动tab切换栏目,今天我们讲另一种突破网页限制的特效- div滚动到顶部