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

时间: 2018-04-16阅读: 5999标签: 滚动
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

js实现单张或多张图片持续无缝滚动

想要实现图片持续滚动,既然使用js,就千万不要加css动画、过渡等相关样式,如果想要滚动的平滑一下,可以一像素一像素的感动,则很平滑,如果加了过渡动画,当图片重置为0时,会有往回倒的动画效果,跟预期不符。

使用elementUI滚动条之横向滚动

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

原生js判断加载更多事件,通过获取页面滚动距离、文档总高度、浏览器视口高度

原生js获取滚动条在Y轴上的滚动距离、获取文档的总高度、获取浏览器视口的高度的方法实现,用于判断页面加载数据。

css隐藏滚动条同时可以滚动

通过 ::-webkit-scrollbar 伪元素; 外层元素 overflow: hidden 内层元素absolute定位;父元素overflow: hidden, 子元素宽度 100% + 滚动条宽度

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

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

90行代码,15个元素实现无限滚动

在本篇文章你将会学到:IntersectionObserver API 的用法,以及如何兼容。如何在 React Hook 中实现无限滚动。如何正确渲染多达10000个元素的列表。无限下拉加载技术使用户在大量成块的内容面前一直滚动查看

JS原生实现连续滚动文字

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

js中scroll滚动

scroll,滚动,一般讨论的是网页整体与浏览器之间的关系。这四个属性,全部是只读属性,其中,无非就是分为宽高和左上。两个方向。

实现移动端信息无缝滚动

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

scrollBehavior 切换到新路由时,页面要滚动到顶部或保持原先的滚动位置

当创建一个 Router 实例,可以提供一个 scrollBehavior 方法:scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

点击更多...

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