关于网站导航样式实现

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

            问题参考网址:

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

2个回答

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值,出现的对应的效果

完整代码:

$(document).scroll(function() {// 滚动函数
    // 滚动条距离顶端的距离
    var scrollTop = $(document).scrollTop();
    if(scrollTop <= $("#id").height()) {
        $("#id ul").css({"background":"","color":"#fff"});// 样式设置
    } else {
        $("#id ul").css({"background":"#fff","color":"#000"});// 样式设置
    }
})
yuqixian
小小程序缘 回复front_endxiaobaia: $(document).scroll(function() {// 滚动函数 // 滚动条距离顶端的距离 var scrollTop = $(document).scrollTop(); if(scrollTop <= $("#id").height()) { $("#id ul").css({"background":"","color":"#fff"});// 样式设置 } else { $("#id ul").css({"background":"#fff","color":"#000"});// 样式设置 } })
12 个月之前 回复
yuqixian
小小程序缘 回复front_endxiaobaia: 如果只是为了这个效果,可以调用scroll函数。例如:$("#id").scroll(function(){})
12 个月之前 回复
front_endxiaobaia
front_endxiaobaia 回复: 怎么设置导航条开始是透明,然后拉滚动条的时候就可以变成白色背景。
大约一年之前 回复
front_endxiaobaia
front_endxiaobaia 那滚动条往下拉的时候导航条一直都是透明的了。。。
大约一年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!