js如何实现滚动到一定位置将内容固定在页面顶部

时间: 2018-04-16阅读: 5758标签: 滚动
window.onscroll=function(){
     //滚动的距离,距离顶部的距离
     var topScroll =document.body.scrollTop||document.documentElement.scrollTop;
     //获取到导航栏id
     var bignav  = document.getElementById("pop_title");
     //当滚动距离大于150px时执行 固定位置 距离
     if(topScroll > 150){  
         bignav.style.position = 'fixed';
         bignav.style.top = -120+ 'px';
         bignav.style.left = 0 + 'px';
     }else{
         //当滚动距离小于150让导航栏恢复原状
         bignav.style.position = 'static';
     }
}

window.onscroll为滚轮监听,document.body.scrollTop||document.documentElement.scrollTop 写两个是为了兼容不同浏览器。固定位置的top要设为负值,原因不明,若为0则会跟上方有空隙。左右位置虽然是0也要设,不然若为不是100%宽度的内容会出现左右跳动。


上面这种方法高度是自己定死的,下面介绍获取元素高度的方法:

window.onload = function(){
    //获取导航框架
    var navContainer = document.getElementById("introductFra"); 
    //获取导航ul
    var navBox = document.getElementById("introBox");  
    //获取导航下内容大框架
    var text = document.getElementById("contantFra"); 
    //获取li
    var navBoxChild = navBox.children;  
    //获取内容里每个大块的框架
    var textChild = text.children;  
    //获取导航距顶端距离
    var num = navContainer.offsetTop;  
    //获取导航高度
    var a = navContainer.offsetHeight;  
    window.onscroll = function(){  
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;  
        //滚动告诉超过导航位置
        if(scrollTop >= num){  
            //导航增加fixed属性
            navContainer.className = "introductFra fixed";  
            //下面板块内容向下空出一个导航的距离
            text.style.paddingTop = a +"px";  
            navContainer.style.zIndex = "999";
        }else{  
            //恢复原属性
            navContainer.className = "introductFra";  
            text.style.paddingTop = "";  
        }  
        //当导航与相应文档接触的时候自动切换   
        for(var i=0;i<navBoxChild.length;i++){  
            if( scrollTop +100 >= textChild[i].offsetTop){  
                //循环给每个li样式设为空
                for(var j=0;j<navBoxChild.length;j++){  
                    navBoxChild[j].className = "";  
                }  
                //选中的设为带标志的
                navBoxChild[i].className = "introCur";  
           }  
        }  
    }; 
}
        //当导航与相应文档接触的时候自动切换   
        for(var i=0;i<navBoxChild.length;i++){  
            if( scrollTop +100 >= textChild[i].offsetTop){  
                for(var j=0;j<navBoxChild.length;j++){  
                    navBoxChild[j].className = "";  
                }  
                navBoxChild[i].className = "introCur";  
           }  
        }  
    }; 
}


offsetTop 为元素距离页面最开始的距离,offsetHeight为元素高度。这样省去了调整位置的麻烦,并且设置fixed的属性为一个class,直接更改li的class名,增加这个属性。

这个代码下面展示了导航如何自动选中为哪个版块,先循环给每个li都设为不带选中的class,当滚动的高度加导航的高度大于版块内容距离上面的高度时,也就是导航移动到版块上方时,这个版块对应的li的class名改为带选中的,其中选中的class  css代码如下,用到了after选择器。

.introCur::after{
    content: '';
    display: block;
    width: 66px;
    height: 3px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -33px;
    background: #333;
}

::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容。这些添加不会出现在DOM中,不会改变文档内容,不可复制,仅仅是在css渲染层加入。所以不要用:before或:after展示有实际意义的内容,尽量使用它们显示修饰性内容,例如图标,书名号。



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/636

关于滚动贯穿的解决方案

当前容器已经滚动到底部或者顶部,无法再滚动,容器会默认选择上层容器进行滚动,可以说滚动贯穿并非是一个bug,只是一种现象

js禁止页面滚动

发移动端页面的时候有一个很比较常见的需求,在出现弹窗时,禁止滑动弹窗后面的主体页面。如何实现呢,往下看

解析移动端滚动穿透

滚动穿透在移动端开发中是一个很常见的问题,产生诡异的交互行为,影响用户体验,同时也让我们的产品看起来不那么“专业”。虽然不少产品选择容忍了这样的行为,但是作为追求极致的工程师,应该去了解为什么会产生以及如何去解决

JS 判断元素是否可以滚动

今天在解决 ios 移动端滚动穿透的问题时遇到一个问题,就是判断元素能否滚动,把这个过程记录下来。以下以纵向滚动为例,横向滚动同理。scrollHeight 是一个元素内容高度的度量,包括由于溢出导致的视图中不可见的内容

三种方式实现平滑滚动页面到顶部的功能

最近开发公司的公众号H5,做了一个点击icon滚动到顶部的功能。实现功能比较简单,直接调用window.scrollTo(0, 0),一行代码完成。但是作为一个攻城狮,怎么可能对自己要求这么低,所以我给自己加了个需求

实现移动端信息无缝滚动

这篇文章主要教大家如何简单实现js无缝滚动效果。这种实例在网页中其实还挺常见的。注意:内容的高度必须大于容器的高度,否则无法滚动

js 禁止/允许页面滚动

passive,设置该属性的目的主要是为了在阻止事件默认行为导致的卡顿。等待监听器的执行是耗时的,有些甚至耗时很明显,这样就会导致页面卡顿。即便监听器是个空函数,也会产生一定的卡顿,毕竟空函数的执行也会耗时

前端高性能滚动 scroll 及页面渲染优化

主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动。因为本文涉及了很多很多基础,是我自己学习记录的一个过程,如果上面列出的知识点都了然于胸了,就可以不必往下看了

解决多个window.onscroll覆盖的问题

默认一个页面只能同时存在一个window.onscroll函数。有的时候我们会引入工具的js框架,在框架中使用onscroll统一监听每个页面,但是在某个页面,我们可能还要使用onscroll来监控滚动条,完成具体某个业务逻辑,这是该怎么做呢?

原生JS实现图片滚动

黑色盒子是最终显示滚动图像的区域,绿色盒子为其子容器,其宽度要大于黑色外层盒子,这样才能通过设置黑色盒子的scrollLeft实现图像的滚动。最内层的蓝色盒子用于包裹所有滚动的图像

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!