学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>css>>经验笔记>>

css实现滚动页面导航栏固定在顶部(吸顶效果)

发布时间:2019-10-27点击:

    Css如何实现滚动页面,实现导航栏固定在顶部(吸顶效果)

    功能:当网页向下滚动时,导航栏一直在固定在顶部

    一、css设置

    这里主要用到css中position中的relative与fixed;

    其中relative是生成相对定位的元素,相对于其正常位置进行定位。

    fixed是生成绝对定位的元素,相对于浏览器窗口进行定位。

    思路就是当导航栏滚动到 top: 0 时,把相对定位改成绝对定位,这样就相对于浏览器窗口进行定位,并且设置一个值,这样导航栏就会固定在某个地方

    代码如下:

    .box{
    	  position: relative;
    	  height: 80px;
    	  width: 100%;
    	  z-index: 999;
    	}
    .box-active{
      position: fixed;
      top: 0;
    }
    二:js设置

    这里用的是jquery进行监听,代码如下:

    // 监听事件
     window.addEventListener('scroll', function(){
     	let t = $('body, html').scrollTop();   // 目前监听的是整个body的滚动条距离
     	if(t>0){
    		$('.box').addClass('box-active')
    	}else{
    		$('.box').removeClass('box-active')
    	}
     })
    以上就是实现导航栏吸顶效果的简单实例,如有疑问欢迎留言相互交流。
赞一个(0)     踩一个(0)    

相关链接

搜索

昵称:*
邮箱:
电话:
评论: