首页 > 其他分享 >jQuery实现下滚不显示,上滚出现的粘性导航

jQuery实现下滚不显示,上滚出现的粘性导航

时间:2022-08-28 21:01:06浏览次数:54  
标签:jQuery top 粘性 header basic 下滚 80 fixed

代码

/粘性导航
    var basic = 80;
    $(window).scroll(function () {
        var top = $(window).scrollTop();
        if (top > basic) {
            $('header').removeClass("header_fixed");
        } else if (top < basic && top > 80) {
            $('header').addClass("header_fixed");
        }else if(top < 80){
            $('header').removeClass("header_fixed");
        }
        basic = top;
    });

标签:jQuery,top,粘性,header,basic,下滚,80,fixed
From: https://www.cnblogs.com/ouhouyi/p/16633626.html

相关文章

  • jQuery实现textarea高度自适应
    js代码$.fn.autoHeight=function(){functionautoHeight(elem){elem.style.height='auto';elem.scrollTop=0;//防抖动......
  • js事件,jQuery类库的介绍
    目录JSJS获取用户输入JS类属性操作JS样式操作事件1.事件的含义2.触发方式3.添加事件的两种方式4.关键字this5.window.onloadJS事件案例jQueryjQuery类库1.介绍2.jQuery导......
  • jQuery类库
    jQuery简介'''核心功能:兼容多浏览器的JavaScript库'''1.一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。2.链式表达式。jQuery的链式操作可以把多......
  • axios和jquery封装ajax请求
        //axios封装的ajax    //get方法返回值是一个promise方法    //document.querySelector('.get').onclick=function(){    /......
  • 【前端】 第05回 JS操作与jQuery
    目录1.JS操作1.1JS获取用户输入1.2JS类属性操作1.3JS样式操作2.事件2.1事件理解2.2绑定事件的两种方式2.3事件中的关键字this2.4window.onload2.5校验用户输入案......
  • JS操作补充与jQuery的基本使用
    JS操作补充与jQuery的基本使用JS获取用户输入首先我们获取用户输入的时候会面临一个问题,就是我们其实如果将接受用户输入的放在上方的话那么就会因为是解释性语言从上至......
  • jQuery介绍、jQuery导入方式、基本使用
    目录jQuery(writelessdomore)jQuery的优势有了jQuery那我们还使用BOM与DOM吗?jQuery导入导入方式jQuery提供的CDN服务优点与缺点添加到自定义模板jQuery基本使用1.jQuary......
  • 2022-8-26第一组孙乃宇Jquery
    JqueryJS库:别人写好的JS文件,我们拿来直接用开发中,会引入很多的.js文件JQuery.js------濒临淘汰,经典。10%以下css库,bootstrap,layui,easyui。React.js-------30%市场......
  • js事件,jQuery,jQuery对象,jQuery选择器
    JS获取用户输入JS类属性操作JS样式操作JS事件JS常用事件绑定事件的方式this关键字window.onloadjQuery什么是jQuery(也叫jQuery类库)jQ......
  • Jquery Ajax添加header参数
    在使用ajax请求接口时需要在请求头添加token来进行身份验证,方式如下:$.ajax({ type:'GET', url:'http://api.php', dataType:'json', jsonp:'callbac......