front_endxiaobaia 2018-10-10 06:21 采纳率: 71.4%
浏览 882
已采纳

关于网站导航样式实现

本人小白一个,想请教各位导航在图片上呈现透明效果,然后往下拉滚动条的时候
导航的背景就可以变成白色的了,我知道用position的fixed可以实现导航固定,
但还是不知道这个效果具体是怎么实现的。想请教一下各位,如有解答十分感谢!

            问题参考网址:

            http://www.uileader.com/index.html
            http://www.alloyteam.com/
            (_绝对没有要推网址的意思,只是这两个网站都有这个效果,如果我没说清楚上面
            的问题,可以看一下它们这个页面,我就想知道最上方的导航效果是怎么实现的_)
  • 写回答

2条回答 默认 最新

  • Yyy-yu 2018-11-25 18:41
    关注

    http://www.alloyteam.com/ 为例子 我来给你做出详细解答

    图片说明

    这是这个网站导航条的样式 它并没有设置背景颜色,只是因为固定定位,导航条在网页不占空间,使得它悬浮在下面轮播图的上方,所以给人视觉一种透明效果;

    接下来就是监测滚动条,你会发现滚动条滚动就会在原来的基础上新加了个类 header-scrolled

    图片说明

    而这个类的样式如下图

    图片说明

    给设置了背景色白色,而且padding值也改变了 ,注意看之前.header 的样式,是设置了这个-webkit-transition: all .4s ease-in-out;CSS3动画的,所以在padding改变时候会有动画过度;

    $(window).scroll(function () {
            //$(window).scrollTop()这个方法是当前滚动条滚动的距离
            // 获取滚动的高度
            var scrollHeight=$(window).scrollTop();
            if(scrollHeight > 0){
                $("header").addClass("header-scrolled");
            }
            if(scrollHeight == 0){
                $("header").removeClass("header-scrolled");
            }
    });
    

    希望采纳,只是监测滚动条,增加删除header-scrolled类,而动画过度是header写了CSS3动画样式,由于新增header-scrolled加了背景色和改变的padding值,出现的对应的效果

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 宝塔面板一键迁移使用不了
  • ¥15 求一个按键录像存储到内存卡的ESP32CAM代码
  • ¥15 如何单独修改下列canvas推箱子代码target参数?,插入图片代替其形状,就是哪个绿色的圆圈每关用插入的图片替代
  • ¥20 四叉树的创建和输出问题
  • ¥15 javaweb连接数据库,jsp文件加载不出来
  • ¥15 matlab关于高斯赛德尔迭代的应用编撰。(相关搜索:matlab代码|迭代法)
  • ¥15 损失匹配问题,求解答
  • ¥15 3500常用汉字书法体检测数据集下载
  • ¥15 odoo17在制造模块或采购模块良品与次品如何分流和在质检模块下如何开发
  • ¥15 Qt音乐播放器的音乐文件相对路径怎么写