首页 > 其他分享 >网页下滑超过一定高度时添加类名(以顶部导航为例)

网页下滑超过一定高度时添加类名(以顶部导航为例)

时间:2023-04-12 11:26:50浏览次数:46  
标签:网页 为例 高度 添加 nav var 导航 类名

//  html部分

    <header class="header">
        <div class="container all_top_nav clearfix contentAll">
            <div class="fl left">
                <a href="javascript:void(0)"><img src="images/logo2.png" alt="" class="img1" /></a>
                <a href="javascript:void(0)"><img src="images/logo_dark.png" alt="" class="img2" /></a>
            </div>
            <div class="fr nav">
                <ul class="navbar_nav" data-in="fadeInUp" data-out="fadeOutUp">
                    <li class="active">
                        <a href="index.html">首页</a>
                    </li>
                    <li class="dropdown">
                        <a href="product.html">
                            产品
                        </a>
                        <div class="dropdown_menu">
                            <a href="product_sales_operation.html">销售与运作计划</a>
                            <a href="supply_chain.html">供应链计划</a>
                            <a href="product_scheduling.html">生产排程</a>
                        </div>
                    </li>
                    <li>
                        <a href="javascript:void(0)">解决方案</a>
                    </li>
                    <li class="dropdown">
                        <a href="javascript:void(0)">关于我们</a>
                        <div class="dropdown_menu">
                            <a href="about.html">关于我们</a>
                            <a href="news.html">新闻资讯</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </header>

//  js部分

$(function(){
  //超过一定高度导航添加类名
  var nav=$("header"); //得到导航对象  
  var win=$(window); //得到窗口对象  
  var sc=$(document);//得到document文档对象。  
  win.scroll(function(){  
    if(sc.scrollTop()>=100){  
      nav.addClass("on");   
    }else{  
	  nav.removeClass("on");  
    }  
  })
}

//  css部分(当下滑高度为100时,js为"header"标签添加了class为"on"的类名),"on"的样式为

.on{
    background: #fff;
    border-bottom: 0.1rem solid #ccc;
}

  

标签:网页,为例,高度,添加,nav,var,导航,类名
From: https://www.cnblogs.com/zcl113366/p/17309114.html

相关文章

  • Python爬虫之循环爬取多个网页
    之前的文中介绍了如何获取给定网址的网页信息,并解析其中的内容。本篇将更进一步,根据给定网址获取并解析给定网址及其相关联网址中的内容。要实现这些功能,我们需要解决以下问题:1、如何持续不断的获取url,并读取相关内容。2、如何判断网址是否已经读取过。文中用到的代码均已上传......
  • 网页单位为(rem)时,js控制自适应字体大小
    //js部分:屏幕大小决定根元素字体大小(functionflexible(window,document){functionresetFontSize(){constsize=(document.documentElement.clientWidth/1920)*16;//1920为设计稿宽度if(document.documentElement.clientWidth>1920){doc......
  • 利用hibernate分析数据库中的表,属性以及对应的类的类名,字段
    2010-08-1109:27hibernate获得数据库的表名列名及其数据@TestpublicvoidtestHIbernateConfig1(){SessionFactoryfactory=newAnnotationConfiguration().configure().buildSessionFactory();AbstractEntityPersisterclassMetadata=......
  • 网页端debugger反调试的几种对抗方式
    简单总结下目前我掌握的几种对抗debugger反调试的方法,也欢迎大佬们有新的好用的方式补充。 首先写一个简单的html演示: 看下下面的这段JS,很简单,运行时做了一下验证,对比test方法的文本,如果不一样就通过setInterval无限调用debugger。functiontest(x,y){......
  • 极速免费部署,国内可用 ChatGPT 网页版
    极速免费部署,国内可用ChatGPT网页版我的星球微信群虽然接入了ChatGPT,但是依然有星友反馈说艾特机器人太麻烦,有些问题也不方便公开。昨天充值api成功了,终于有底气把网页版开放给星友了。这里就把部署方式和使用方法介绍给大家吧其实简单到离谱,这个开源项目里点击Deploy就行......
  • vmware esxi 用户名(账号)密码明明正确,网页却无法登录管理后台的解决办法大全
    相信使用过VmwareEsxi虚拟系统的网友们可能都偶尔遇到过,明明vmwareesxi用户名密码是正确的,管理网页却无法登录管理的现象。一、账号密码正常但无法登录现象:隔了一段时间没有登录,用服务器名或IP再登录Vmware的网页管理后台,输入正确的管理员用户名及密码,之前登录都非常正常......
  • 在网页中写javascript
    在网页中写Javascript1.在网页中直接嵌入<scriptlanguage="javascript"></script>**script标签可以放在head和body标签里面**<scriptlanguage="javascript">varnow=newDate();varhour=now.getHours();var......
  • 通过网页打开winform程序
    winform页面代码:///<summary>///注册表的写入///</summary>///<paramname="sender"></param>///<paramname="e"></param>privatevoidtsmiWriteRegister_Cli......
  • 如何破限使用 Adobe Fonts 中的字体(以Forma DJR为例)
    朋友推荐游戏中的英文使用等线字体FormaDJR,搜索了之后发现官网花里胡哨完全看不懂(英语差,懒),而AdobeFonts里能够免费授权CreativCloud用户非商业使用,不巧的是我也买不起正版adobe软件,于是在网上疯狂搜索如何白嫖使用,以下是逐步破解使用过程。需要使用的字体:FormaDJRDeck|Ad......
  • WebKit网页布局实现(0):基本概念及标准篇
    作为一个广受好评的浏览器引擎,其网页布局的质量(包括速度、效率、符合标准度等)往往是其关键,那么WebKit究竟是如何布局网页上的所有元素(包括滚动条、文字、图片、按钮、下拉框等)呢?其主要数据结构及流程都包括哪些呢?其布局的基本概念及标准都有哪些呢?下面分别介绍WebKit对其实现......