css 选择一列表菜单,css实现菜单列表随滚动条指定到对应内容
最近写了一个新闻页面,要求列表底部5px的蓝色边框随滚动条的变化对应到指定的内容,同时列表下边框也随着变化,先给大家看下效果图样式
2.编写代码
3.添加样式
.page-news-nav{
width: 100%;
height: 87px;
background: #fff;
box-shadow: 0 3px 5px rgba(193,193,193,1);
filter: progid:DXImageTransform.Microsoft.Shadow(color='#c1c1c1', Direction=135, Strength=5,);/*for ie6,7,8*/
-moz-box-shadow:0 3px 5px rgba(193,193,193,1);/*firefox*/
-webkit-box-shadow:0 3px 5px rgba(193,193,193,1);/*webkit*/
}
.news-nav-ul{
width: 1000px;
margin: 0 auto;
}
.page-news-nav ul li {
float: left;
width:125px;
height: 87px;
}
.page-news-nav .news-nav-word{
display: block;
width: 81px;
height: 87px;
font-size: 14px;
color: #000;
text-align: center;
line-height: 87px;
cursor: pointer;
text-decoration: none;
}
.page-news-nav .nav-word-on{
height: 82px;
border-bottom: 5px solid #00a0ea;
}
4.编写js代码
引入jq文件
$(function(){
// 获取菜单栏到顶部的距离
var navH=$(".page-news-nav").offset().top;
$(window).scroll(function(){
// 获取滚动条滑动距离
var scroH=document.body.scrollTop;
if(scroH>=navH+10){
$(".page-news-nav").css({"position":"fixed","top":"0","z-index":"9999"});
}else{
$(".page-news-nav").css({"position":"static"}) ;
}
if(scroH>=0 && scroH<300){
$(".news-nav-word").removeClass("nav-word-on");
$(".nav-li-one").addClass("nav-word-on");
}else if(scroH>=300 && scroH<700){
$(".news-nav-word").removeClass("nav-word-on");
$(".nav-li-two").addClass("nav-word-on");
}else if(scroH>=700 && scroH<1300){
$(".news-nav-word").removeClass("nav-word-on");
$(".nav-li-three").addClass("nav-word-on");
}else if(scroH>=1300 && scroH<1800){
$(".news-nav-word").removeClass("nav-word-on");
$(".nav-li-four").addClass("nav-word-on");
}else if(scroH>=1800 && scroH<2500){
$(".news-nav-word").removeClass("nav-word-on");
$(".nav-li-five").addClass("nav-word-on");
}else if(scroH>=2500 && scroH<3100){
$(".news-nav-word").removeClass("nav-word-on");
$(".nav-li-six").addClass("nav-word-on");
}else if(scroH>=3100 && scroH<3700){
$(".news-nav-word").removeClass("nav-word-on");
$(".nav-li-seven").addClass("nav-word-on");
}else if(scroH>=3700 && scroH<4000){
$(".news-nav-word").removeClass("nav-word-on");
$(".nav-li-eight").addClass("nav-word-on");
}
})
$(".nav-li-one").click(function(){
$('body,html').animate({scrollTop:0},500);
})
$(".nav-li-two").click(function(){
$('body,html').animate({scrollTop:472},500);
})
$(".nav-li-three").click(function(){
$('body,html').animate({scrollTop:1000},500);
})
$(".nav-li-four").click(function(){
$('body,html').animate({scrollTop:1600},500);
})
$(".nav-li-five").click(function(){
$('body,html').animate({scrollTop:2200},500);
})
$(".nav-li-six").click(function(){
$('body,html').animate({scrollTop:2800},500);
})
$(".nav-li-seven").click(function(){
$('body,html').animate({scrollTop:3400},500);
})
$(".nav-li-eight").click(function(){
$('body,html').animate({scrollTop:4000},500);
})
})
效果就实现啦!
css 选择一列表菜单,css实现菜单列表随滚动条指定到对应内容相关推荐
- jq 点击导航添加背景_jq入门(2)css选择符
今天继续分享jq入门基础. css选择符 jQuery支持CSS规范1到规范3中的几乎所有选择符,具体内容可以参考W3C网站.这种对CSS选择符的支持,使得开发者在增强自己的网站时,不必为哪种浏览器不 ...
- 好程序员web前端CSS选择符(选择器):表示要定义样式的对象
好程序员web前端CSS选择符(选择器):表示要定义样式的对象 1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; backgro ...
- web前端CSS选择符:表示要定义样式的对象
1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; background:red;} 语法:元素名称{属性:属性值:} 说明: a ...
- html生成无序列表,CSS无序列表创建的标准菜单效果代码
本文实例讲述了CSS无序列表创建的标准菜单效果代码.分享给大家供大家参考.具体如下: 这是一款用LI无序列表创建的标准CSS菜单,这是国外一个网站的CSS制作教程,这里重新整理了一下,去除了广告代码, ...
- css 菜单栏悬停_在CSS中构建悬停菜单
css 菜单栏悬停 A good menu design is an important part of any website or web app UI. Using only modern HT ...
- css菜单下拉菜单_在CSS中创建下拉菜单
css菜单下拉菜单 CSS | 创建下拉菜单 (CSS | Creating Dropdown) Trivia: 琐事: We know the importance of navigation ba ...
- HTML下拉菜单怎么做成横向,css导航条横向带下拉菜单
css+div导航下拉二级菜单竖排效果如何改为横排? ,在"下一站"有三个二级竖排菜单,如何能变为横排?困扰了我一天了,让二级菜单变成一行,只需要在竖排的效果上,让二级菜单都浮动起 ...
- css案例1——一级菜单、二级菜单、三级菜单、四级菜单
一.案例描述 使用纯css代码实现多级菜单,方法简单易理解. 二.案例 1.一级菜单 (1)效果演示 利用无序列表和浮动完成此效果,结构简单. 2.二级菜单 (1)效果演示 (2)代码展示 css代码 ...
- css的滑动门效果,JS+CSS实现简易实用的滑动门菜单效果
本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一个简洁实用的CSS+JavaScript滑动门导航菜单,写时候,我尽量用最少的代码写出兼容性好的代码,希 ...
最新文章
- 「2018山东一轮集训」 Tree
- Metasploit漏洞利用基础教程要出版了
- 说说初用 Mock 工具测试碰到的坑
- 内表数据写到服务器上
- mysql编译卡主_mysql 编译安装以及主从设定
- bzoj1639[Usaco2007 Mar]Monthly Expense 月度开支*
- android 图片操作,Android图片操作(Bitmap)
- 提高开发效率,eclipse的常用快捷键、旁门左道、系统错误小贴士
- 坐火车太无聊,我溜入微软 VS Code官方GitHub仓库,但没敢发动供应链攻击
- java序列化(六) - protostuff序列化
- iOS9使用提示框的正确实现方式(UIAlertView is deprecated)
- 如何在Mac中使用预览应用合并PDF文件,Mac预览应用合并PDF文件?
- CentOS 7.X配置连接网络
- 设计模式-工厂方法的应用场景及Java中对工厂方法的应用
- RP网页设计中的默认字体:{font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;}
- Aspose.Words 删除批注
- ASO检索规则-热词覆盖如何来做?
- 19秋计算机应用基础在线作业2,计算机应用基础19秋在线作业2 Windows 下能浏览并管理文件 驱动器及网络连接的强大工具是...
- Oculus内下游戏报错,OVR40779122解决办法
- 一个n*n矩阵对角线元素之和
热门文章
- Java生成CSV文件
- NSLocalizedString不起作用
- Updater Application Block v1.0 翻译文档目录
- python自定义全局异常_Django 自定义404 500等错误页面的实现
- python pipeline框架_介绍Python的Django框架中的静态资源管理器django-pipeline
- handler和thread之间如何传输数据_网线虽常见,学问可不少,科普一下网线的简单知识及如何选择网线...
- scrapy的name变量_Python3 Scrapy框架学习四:爬取的数据存入MongoDB
- c语言里的%p的作用,C语言中geiwei=m%10什么意思,求解!
- 服务器子系统是什么,服务器是什么样子的,服务器一般用什么系统!
- php验证时区是否存在,php – 验证来自不同网站的时区名称?