网站运营写营销,建站公司前景,网络营销的理论基础,在线定制css怎么实现滚动页面导航栏固定在顶部(吸顶效果)功能#xff1a;当网页向下滚动时#xff0c;导航栏一直在固定在顶部一、css设置这里主要用到css中position中的relative与fixed#xff1b;其中relative是生成相对定位的元素#xff0c;相对于其正常位置进行定位。fixed是生…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(t0){$(.box).addClass(box-active)}else{$(.box).removeClass(box-active)}})
