Jquery中,关于固定头部菜单条代码(摘)

$(function () {

$(window).scroll(function ()

{

if ($(window).scrollTop() >= 150)

{

//加入fixedNavCSS样式

$(".Dp-Navbar").addClass("fixedNav");

}

else

{

//去除fixedNavCSS样式

$(".Dp-Navbar").removeClass("fixedNav");         }

});

});

注:1.新建一个.js文件,并在项目里引用它。还要引用“~/Scripts/jquery-1.10.2.min.js”

2.该Js文件里修改作用的Div名称和新建(修改?)CSS样式表名称。

3.F5,测试通过。(希望大神找出它的不好之处,提出性能和功能上的改进)

Jquery中,关于固定头部菜单条代码(摘)

时间: 2024-10-12 00:43:34

Jquery中,关于固定头部菜单条代码(摘)的相关文章

jquery实现的三级导航菜单实例代码

jquery实现的三级导航菜单实例代码:使用最多的可能是二级导航菜单,所以网上的代码一大堆,三级菜单的代码也很多,不过相对较少一些,本章节通过一个代码实例详细介绍一下三级导航菜单的实现过程,代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta nam

JQuery中trim函数的具体实现代码

由于Javascript 1.8.1 之前的版本,没有内置 trim 函数,所以 JQuery 对它有自己的实现.不同的JQuery版本,trim函数的实现也不尽相同. 阅读本文需要掌握正则表达式用法,如果不是很了解,建议阅读这个.鉴于正则表达式的强大用途(在各种语言如JS,Python,Ruby,Java中都会用到),建议重点学习并掌握. JQuery 1.7.2版本 // 截取的部分源码,不是完整语句,旨在说明实现过程 trimLeft = /^\s+/, trimRight = /\s+$

移动端固定头部和固定左边第一列的实现方案(Vue中实现demo)

最近移动端做一份报表,需要左右滚动时,固定左边部分:上下滚动时,固定头部部分. 代码在Vue中简单实现 主要思路是: a.左边部分滚动,实时修改右边部分的滚动条高度 b.头部和内容部分都设置固定高度,当内容部分内容高度大于设置的高度时,产生滚动条 c.左右部分也设置固定宽度,左边设置固定宽度,右边设置成窗口的宽度减去左边部分的宽度,当右边部分的宽度大于设置的宽度时产生滚动条 扩展思路: a.监控左右(x)滚动条滚动到右边边缘时,可以触发事件(如:加载下一批数据) b.监控上下(y)滚动条滚动到下

jquery中$.each()的用法

each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery和jQuery对象都实 现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话 说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用.而jQuery对象提供的each方法则是对jQuery内 部的子元素进行逐个调用. each函数根据参数的类型实现的效果不完

jquery中的mouseenter实现理解

说在前面:首先说一下两者之间的区别,假设当前元素为element,mouseover事件具有冒泡特性,也就是说无论鼠标是从别的元素移动到element或者是从element的子元素移动到element都会触发mouseover事件.对于mouseenter事件,该事件没有冒泡特性,也就是说只有鼠标穿过该事件的时候才会触发mouseenter,如果鼠标一直在element内部"游走",则不会触发mouseenter.具体的例子可以参考这个例子点击打开链接. 前提说完了,那么怎么使用mou

Jquery中parent()和parents()

一.parent()方法 此方法取得匹配元素集合中每个元素的紧邻父元素,也就是第一级父元素,而不是所有的祖先元素.所取得的父元素集合也可以使用表达式进行筛选. 二.parents()方法 此方法取得一个包含着所有匹配元素的父辈元素的元素集合.所取得的父辈元素集合也可以使用表达式进行筛选 如果给定一个表示 DOM 元素集合的 jQuery 对象,.parents() 方法允许我们在 DOM 树中搜索这些元素的祖先元素,并用从最近的父元素向上的顺序排列的匹配元素构造一个新的 jQuery 对象.元素

js中window.onload 与 jquery中$(document.ready()) 测试

js中window.onload 与 jquery中$(document.ready())区别,验证代码如下(调换js代码和Jquer代码书写顺序测试,运行结果一样,因此与代码书写位置没关系): <html> <head> <script type='text/javascript' src='jquery-1.11.1.min.js'></script> <script type='text/javascript'> $(document).r

20款jquery下拉导航菜单特效代码分享

jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应式导航菜单支持手机导航菜单代码 jquery鼠标导航下滑显示图片列表效果 jQuery个性动画二级下拉导航代码 jquery网站下拉菜单制作企业网站导航菜单代码 jQuery游戏网站顶部滑动导航菜单代码 jquery.superfish.js导航菜单插件制作网页无限级下拉菜单代码 jquery hover事件实用的企业网站二级导航菜单样式 j

使用jquery实现的多级树形菜单代码实例

使用jquery实现的多级树形菜单代码实例:树形菜单在网站中有大量的应用,这当然是因为它的独特优点,首先它可以有效的组织数据,使分类更为清晰明了,通常情况下树形菜单是可以折叠的,这样可以以更小的空间容纳更多的数据,下面就详细介绍一个使用jquery实现的属性菜单.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author&q