学做网站培训课程介绍

当前位置:

如何让网站导航在滚动时悬浮固定位置

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>

另外一种方法:

  1. 在代码顶部</head>标签上方引入JQUERY;
  2. 在style.css中添加以下的样式代码:
    
    
    div.sticky {
    position: fixed;
    width: 100%;
    background-color: #fff;
    z-index: 99;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .11);
    top: 0;
    }
  3. 在代码底部</body>标签上面添加以下的JS代码,实现DIV触顶固定悬浮在浏览器顶部。btm-header为导航的class名。
    
    
    <script type="text/javascript">
    $(window).scroll(function(){
    var scroH = $(this).scrollTop();
    if(scroH>=50){
    $(".btm-header").addClass('sticky');
    }else if(scroH<50){
    $(".btm-header").removeClass('sticky');
    }
    })
    </script>

发表评论

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