Js控制网页滑动的时候顶部导航条变成半透明实例

￡神魔★判官ぃ 2022-06-02 01:45 250阅读 0赞

<!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
        
      <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;
    	}
      </style>
     </head>
     <body>
      <div class="nav"></div>
      <div class="main"></div>
      <script>
    	    function _scroll(){
                var scrollTop =$(window).scrollTop();
                if(scrollTop<10){
                    $('.nav').css('opacity',1);
                }else{
                    $('.nav').css('opacity',0.1);
                }
            }
            $(window).on('scroll',function() {
                _scroll()
            });
      </script>
     </body>
    </html>

**每天进步一点，更多精彩，欢迎关注公众号“编程社”！**

![1.jpg][]

[1.jpg]: /images/20220602/3ed39483a20f453cb624bca5a1133472.png

发表评论取消回复

表情：

评论列表（有 0 条评论，250人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app顶部导航栏下拉滑动固定到屏幕顶部

示例图片 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

╰半夏微凉°/ 2022年12月23日 09:53/ 0 赞/ 303 阅读

相关 uni-app带滑动条的导航栏

先放实现效果图： > ![实现效果图][20210316110547509.gif_pic_center] 结构： <scroll-view scroll-x c

超、凢脫俗/ 2022年11月10日 03:46/ 0 赞/ 251 阅读

相关 android 导航栏半透明,Android 沉浸式/透明式状态栏、导航栏

前言 Android 从4.4开始引进透明状态栏和导航栏的概念，并且在5.0进行了改进，将透明变成了半透明的效果。虽然此特性最早出现在ios，但不否认效果还是很赞的。至于

曾经终败给现在/ 2022年10月16日 07:38/ 0 赞/ 314 阅读

相关 Viewpager实现今日头条顶部导航的功能

利用简单的Textview 和Viewpager实现滑动、点击换页的效果，效果图如下： ![行走的那些事][20160625113922931]　　　![行走的那些事][20

小鱼儿/ 2022年09月22日 01:16/ 0 赞/ 172 阅读

相关 Js中实现网页上导航条的切换功能

daohanqiehuan.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

柔光的暖阳◎/ 2022年08月21日 11:58/ 0 赞/ 84 阅读

相关 Android ：ViewPager+Fragment 实现顶部导航滑动效果

我还不会gif 所以连图表动态可以滑动的仔细看底下有滑动条的这是寒假做的一个APP的基本框架将真啊虽然效果都做出来了可是学长给了源码啊所以最近做第二遍！！希望每一

偏执的太偏执、/ 2022年08月21日 10:56/ 0 赞/ 322 阅读

相关 android——顶部导航栏滑动变换背景色

效果图： ![Center][] 当鼠标向下滑动的时候，顶部导航栏会设置一个距离顶部的值进行判断，滑动的时候，当滑动距离的值大于我们设置的这个值就改变导航栏的背景颜色，当滑

清疚/ 2022年06月03日 01:40/ 0 赞/ 341 阅读

相关 Js控制网页滑动的时候顶部导航条变成半透明实例

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

￡神魔★判官ぃ/ 2022年06月02日 01:45/ 0 赞/ 251 阅读

相关 js 实现导航栏滑动透明渐变样式

学习记录，欢迎各位参考，有更好的方案也可以一起讨论！下面直接贴代码，可以直接复制到自己的编辑器运行 <!DOCTYPE html> <html>

怼烎@/ 2022年05月08日 06:20/ 0 赞/ 387 阅读

相关 CSS固定定位生成网页顶部导航栏实例

固定定位 position:fixed 固定定位是相对与浏览器窗口来定位, 就算页面滚动, 固定定位元素的位置不会变固定定位元素脱离了标准文档流, 会雅盖主标准文档流

迈不过友情╰/ 2021年10月19日 10:12/ 0 赞/ 470 阅读