关闭

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

时间: 2018-04-16阅读: 5189标签: 滚动
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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

JS原生实现连续滚动文字

最近在工作中遇到,文字在大屏中,出现底部有留白导致不连续的现象,很奇怪,故写这篇文章细究其原因;offsetTop 小于等于 scrollTop时 scrollTop至为0,此次滚动条回到初始位置

vue使用keep-alive保持滚动条位置的实现

简单介绍,使用keep-alive的时候,返回前一页,没有保持滚动条位置。事实上,就算不使用keep-alive,位置也没有被记录。但是,在不使用keep-alive的时候,页面内容会刷新,所以就随他去了……就是这么任性……

无间歇文字滚动_ 原生js实现新闻无间歇性上下滚动

这篇文章主要介绍使用js实现文字无间歇性上下滚动,一些网站的公告,新闻列表使用的比较多,感兴趣的小伙伴们可以参考一下

基于iScroll实现内容滚动

iScroll 是一款针对web app使用的滚动控件,它可以模拟原生IOS应用里的滚动列表操作,还可以实现缩放、拉动刷新、精确捕捉元素、自定义滚动条等功能。

DOM盒模型和位置 client offset scroll 和滚动的关系

在dom里面有几个描述盒子位置信息的值,pading border margin,width height,client;盒模型生产环境一般使用 box-sizing: border-box,效果:width == content.width + pading + border

使用elementUI滚动条之横向滚动

这里要简单的设置一下,将标签的height设为100%,读者查看效果的时候,会出现一个横向的滚动条,如果你不想要横向的滚动条,使用下面css属性设置就可以只显示竖向滚动条。

CSS 实现隐藏滚动条同时又可以滚动

移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动?使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚动的特性。于是想到了自定义滚动条的伪对象选择器::-webkit-scrollbar。

移动端滚动穿透问题解决方案

移动端有可滚动的弹窗肯定会遇到的问题,滑动弹层背景跟着滚动,如果弹窗里面的内容不需要滚动的可以直接粗暴的把滚动事件禁用掉,但是如果弹窗内容过多需要滚动那就不可以这样做。以下这个解决办法在线上使用没有问题,可以大胆拿去用

JS 判断元素是否可以滚动

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

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

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

点击更多...

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