JS控制网页滑动顶部导航条变色

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><!--引入jQuery--><script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script><title>Js控制网页滑动的时候顶部导航条变成半透明</title><style type="text/css">.main {width: 100%;height: 2000px;background: gray;}.nav {width: 100%;height: 100px;background: black;position: fixed;top: 0;}.content {position: f;top: 0;right: 0;left: 0;bottom: 2.5rem;}.place {width: 100%;height: 300px;margin-top: 300px;background: red;}</style></head><body><div class="nav"></div><div class="main"><div class="place"></div></div><script>function scroll() {var top = $(".place").offset().top;//获取导航栏变色的位置距顶部的高度var scrollTop = $(window).scrollTop();//获取当前窗口距顶部的高度if (scrollTop < top) {$('.nav').css('opacity', 1);} else {$('.nav').css('opacity', 0.1);}}$(window).on('scroll', function() {scroll()});</script></body>
</html>

JS控制网页滑动顶部导航条变色相关推荐

jquery根据滚动像素显示隐藏顶部导航条
本文使用jquery的scrollTop方法监视页面垂直滚动像素,并根据像素隐藏或者显示顶部的导航条. 效果预览网址:http://www.keleyi.com/keleyi/phtml/scroll ...
如何构建顶部导航条_如何构建导航栏
如何构建顶部导航条导航栏 (Navigation Bars) Navigation bars are a very important element to any website. They pr ...
Android 资讯类App项目实战第一章滑动顶部导航栏
前言: 正在做一个资讯类app,打算一边做一边整理,供自己学习与巩固.用到的知识复杂度不高,仅适于新手.经验不多,如果写出来的代码有不好的地方欢迎讨论. 该系列的其他文章第二章 retrofit获取 ...
小程序的横向二级顶部导航条，可以切换、拖动、二级定位在一级的下面，高度怎么办
项目场景: **做一个小程序的横向二级顶部导航条,可以切换.拖动.二级定位在一级的下面** 问题描述: 我只能设置scroll-view的高度,不然不显示二级菜单这是html代码 <view ...
html背景音乐播放与暂停,js控制网页背景音乐播放与停止的方法
本文实例讲述了js控制网页背景音乐播放与停止的方法.分享给大家供大家参考.具体实现方法如下: js控制背景音乐bgsound的方法(开始与停止) var bg_sound=document.creat ...
前端学习———用css实现顶部导航条及下拉框
css实现顶部导航条及下拉框一.原理二.HTML 三.CSS 1.设置外部容器样式 2.设置内部容器样式 3.设置导航条中的元素 4.设置下拉框元素 5.设置父元素 6.效果展示一.原理 1. ...
js控制网页动态效果
目录实现效果技术点导航文字高亮实现左侧菜单栏实现倒计时实现轮播图实现点击小圆点,高亮,图片跟随切换图自动播放小圆点冲突问题鼠标经过与离开效果实现实现效果前提:都必须用js来实现 ...
android顶部导航高度,Android特效——————底部/顶部导航条（Fragment+ViewPaper+XTabLayout）...
初次使用xtablayout和viewpaper2.所以就弄了最基础的导航条一.效果二.代码配置环境[在bulid.gradle中添加以下代码] implementation 'androidx ...
JS控制网页中Flash影片的播放（附带各参数）
实现功能: 在网页中嵌入一段swf视频,加载网页时不播放,点击下面的播放按钮实现播放首先在网页中嵌入Object代码: <object classid="clsid:d27cdb6e ...

JS控制网页滑动顶部导航条变色

JS控制网页滑动顶部导航条变色相关推荐

最新文章

热门文章