JS实现菜单滚动到一定高度后固定

在有些网页中我们会发现会有这样的现象:某个div会随着屏幕的滚动达到一定高度的时候位置就固定下来了。例如一下导航条:

那么这里就需要用到JS的逻辑方法来实现了。

html

<div id="space"></div>
<ul id="nav">
   <li><a href="#content1">美食</a></li>
   <li><a href="#content2">娱乐</a></li>
   <li><a href="#content3">超市</a></li>
   <li><a href="#content4">出行</a></li>
   <li><a href="#content5">养车</a></li>
</ul>
<div id="content1">内容区域一</div>
<div id="content2">内容区域二</div>
<div id="content3">内容区域三</div>
<div id="content4">内容区域四</div>
<div id="content5">内容区域五</div>

js

<script type="text/javascript">
    window.onscroll=function(){
        var topScroll =document.body.scrollTop || document.documentElement.scrollTop;//滚动的距离,距离顶部的距离
        console.log(topScroll,'topScroll')
        var space  = document.getElementById("space");
        var bignav  = document.getElementById("nav");//获取到导航栏id
        var spaceOffsetHeight = space.offsetTop    //以spce的滚动高度为参照
        console.log(spaceOffsetHeight,'navOffsetHeight')
        if(topScroll > spaceOffsetHeight){
            bignav.style.position = 'fixed';
            bignav.style.top = '0';
            bignav.style.zIndex = '9999';
        } else {
            bignav.style.position = 'static';
        }
    }
</script>

原文地址:https://www.cnblogs.com/wangRong-smile/p/11981179.html

时间: 2024-10-28 23:07:06

JS实现菜单滚动到一定高度后固定的相关文章

JS实现 网页下拉一段后固定导航条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

div滚动到页面顶端后固定住(转)

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>滚动至顶部后固定</title> <style type="text/css"> .wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;} .header{height:150p

div滚动到页面顶端后固定住

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>滚动至顶部后固定</title> <style type="text/css"> .wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;} .header{height:150p

导航栏下拉至一定高度后固定在顶部的特效

<script type="text/javascript"> $(function(){ var nav=$(".nav"); //得到导航对象 var win=$(window); //得到窗口对象 var sc=$(document);//得到document文档对象. win.scroll(function(){ if(sc.scrollTop()>=100){ nav.addClass("fixednav"); $(&

菜单滚动至顶部后固定

<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>菜单滚动至顶部后固定-柯乐义</title><style type="text/css">.wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;}.header{height:150px

JS 实现DIV 滚动至顶部后固定

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>DIV滚动至顶部后固定</title> </head> <body style="height:2000px;"> <div style="height: 200px"></div> <div id=&q

FullPage.js全屏滚动插件学习总结

如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js 主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等 实

jquery.fullPage.js全屏滚动插件

效果演示 网站   http://www.51xuediannao.com/demo.php 插件下载  http://www.51xuediannao.com/js/jquery/jquery.fullPage.html jquery.fullPage.js是一个全屏滚动插件,本文提供jquery.fullPage实例教程演示 看啥都不如看演示来的直观,走起! 基本滚动 http://www.51xuediannao.com/js/jquery/jquery.fullPage/index2.h

WOW.js – 让页面滚动更有趣

官网:http://mynameismatthieu.com/WOW/ 建议去官网一看 下载地址:https://github.com/matthieua/WOW 浏览器兼容 IE10+  Chrome  Firefox  Opera  Safari  IE6.IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果:而 wow.js 也使用了 querySelectorAll 方法,IE 低版本会报错.为了达到更好的兼容,最好加一个浏览器及版本判断. 1.wow.js依赖于animate.cs