零基础学做网站培训介绍

当前位置:

如何让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>

相关阅读:

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

Div 滚动到顶部固定(附代码)

发表评论

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