思路1
顶部导航条的背景透明度随着 滚动条滚动的像素 增加或者减少
思路2
只要滚动条的像素大于0 就给背景透明度1 然后再给个transitionshijian也有过度效果
问题1
顶部导航条要使用2层DIV叠加 1层为内容层 1层为作为背景层 如果只是用1层 里面的内容会同时改变透明度
问题2
透明度和滚动条高度的关系
下面例子 导航条初始透明度是0 当滚动条距离顶部到180像素时(向下滚动180像素时)变为不透明
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<title>jQue