Javascript 如何使导航返回顶部透明

我的导航从透明变为#eee，并在通过标题h1标记时获得一个方框阴影——“0px 1px 3px rgba（0,0,0,0.2）”。我该如何做相反的事情，让它回到无框阴影和无填充状态

代码：

$（文档）.ready（函数（）{
var scroll_start=0；
var startchange=$（“#头h1”）；
var offset=startchange.offset（）；
if（起始更改长度）{
$（文档）。滚动（函数（）{
scroll_start=$（this.scrollTop（）；
如果（滚动开始>偏移量顶部）{
$（“#nav”）.css（'background-color'，'#eee'）；
$（“#nav”）.css（“-webkit盒阴影”，“0px 1px 3px rgba（0,0,0,0.2）”）；
$（“#nav”）.css（'-moz-box-shadow'，'0px 1px 3px rgba（0,0,0,0.2）'）；
$（“#nav”）.css（'box-shadow'，'0px 1px 3px rgba（0,0,0,0.2）'）；
}
});
}
});
/*导航css*/
#导航{
位置：固定；
宽度：100%；
高度：75px；
背景色：透明；
显示：内联块；
垂直对齐：自动；
z指数：10000；
排名：0；
保证金：自动；
左：0；
右：0；
文本对齐：居中；
过渡：背景色500ms线性；
}
#李国荣{
宽度：150px；
高度：75px；
列表样式类型：无；
文本对齐：居中；
线高：50px；
光标：指针；
字体大小：15px；
显示：内联块；
垂直对齐：中间对齐；
边缘顶部：15px；
}
#海军ulli a{
文字装饰：无；
颜色：#999；
显示：块；
}
#导航ulli a：悬停{
颜色：#bdbd；
}
/*标题css*/
#标题{
位置：绝对位置；
高度：100vh；
宽度：100%；
背景色：rgb（164）；
文本对齐：居中；
显示：块；
z指数：9998；
边际上限：0；
背景图像：url（../images/mac header.jpg）；
背景重复：无重复；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
背景附件：固定；
}
#收割台h1{
位置：相对位置；
边际上限：40vh；
显示：块；
字体大小：75px；
颜色：#eeeeee；
}
#收割台h3{
颜色：#中交；
}
#收割台h1{
-webkit动画：fadein 5s；/*Safari、Chrome和Opera>12.1*/
-moz动画：fadein 5s；/*Firefox<16*/
-ms动画：fadein 5s；/*Internet Explorer*/
-o-动画：fadein 5s；/*Opera<12.1*/
动画：fadein 5s；
}
#阻止{
宽度：100%；
高度：100vh；
}
#占位符{
宽度：100%；
高度：100vh；
}








对称是创造性的。

范例


var startChange=$（“#头h1”）；
var offset=startChange.offset（）；
$（文档）。滚动（函数（）{
var scrollStart=$（this.scrollTop（）；
if（scrollStart>offset.top-$（“#nav”）.height（））{
$（“#nav”）.css({
“背景色”：“eee”
});
}否则{
$（“#nav”）.css({
“背景色”：“透明”
});
}
});
正文{
高度：3000px；
}
#导航{
边框：2倍实心#000；
位置：固定；
顶部：0px；
左：0px；
右：0px；
}
#导航a{
显示：内联块；
填充：10px；
}
#收割台h1{
边缘顶部：100px；
文本对齐：居中；
边框：2倍实心#000；
}

祝你生活愉快？

范例


var startChange=$（“#头h1”）；
var offset=startChange.offset（）；
$（文档）。滚动（函数（）{
var scrollStart=$（this.scrollTop（）；
if（scrollStart>offset.top-$（“#nav”）.height（））{
$（“#nav”）.css({
“背景色”：“eee”
});
}否则{
$（“#nav”）.css({
“背景色”：“透明”
});
}
});
正文{
高度：3000px；
}
#导航{
边框：2倍实心#000；
位置：固定；
顶部：0px；
左：0px；
右：0px；
}
#导航a{
显示：内联块；
填充：10px；
}
#收割台h1{
边缘顶部：100px；
文本对齐：居中；
边框：2倍实心#000；
}

祝你生活愉快？
当您在偏移量下方滚动时，您有专门设置CSS的JavaScript代码
if（scroll\u start>offset.top）{…}
，但当您向上滚动时，您不会执行任何操作

再次超过偏移量时，只需删除样式：

   if(scroll_start > offset.top) {
     // your existing code
   } else {
     // new code to set style when scroll is above offset
   }

当您在偏移量
if（scroll\u start>offset.top）{…}
下方滚动时，您有专门设置CSS的JavaScript代码，但当您向上滚动时，您不会执行任何操作

再次超过偏移量时，只需删除样式：

   if(scroll_start > offset.top) {
     // your existing code
   } else {
     // new code to set style when scroll is above offset
   }

按如下所示更改javascript代码。您必须编写
else
条件才能实现此目的

$(document).ready(function () {
    var scroll_start = 0;
    var startchange = $('#header h1');
    var offset = startchange.offset();
    if (startchange.length) {
        $(document).scroll(function () {
            scroll_start = $(this).scrollTop();
            if (scroll_start > offset.top) {
                $("#nav").css('background-color', '#eee');
                $("#nav").css('-webkit-box-shadow', '0px 1px 3px rgba(0, 0, 0, 0.2)');
                $("#nav").css('-moz-box-shadow', '0px 1px 3px rgba(0, 0, 0, 0.2)');
                $("#nav").css('box-shadow', '0px 1px 3px rgba(0, 0, 0, 0.2)');
            }
            else {
                $("#nav").css('background-color', 'transparent');
                $("#nav").css('-webkit-box-shadow', 'none');
                $("#nav").css('-moz-box-shadow', 'none');
                $("#nav").css('box-shadow', 'none');
            }
        });
    }
});

按如下所示更改javascript代码。您必须编写
else
条件才能实现此目的

$(document).ready(function () {
    var scroll_start = 0;
    var startchange = $('#header h1');
    var offset = startchange.offset();
    if (startchange.length) {
        $(document).scroll(function () {
            scroll_start = $(this).scrollTop();
            if (scroll_start > offset.top) {
                $("#nav").css('background-color', '#eee');
                $("#nav").css('-webkit-box-shadow', '0px 1px 3px rgba(0, 0, 0, 0.2)');
                $("#nav").css('-moz-box-shadow', '0px 1px 3px rgba(0, 0, 0, 0.2)');
                $("#nav").css('box-shadow', '0px 1px 3px rgba(0, 0, 0, 0.2)');
            }
            else {
                $("#nav").css('background-color', 'transparent');
                $("#nav").css('-webkit-box-shadow', 'none');
                $("#nav").css('-moz-box-shadow', 'none');
                $("#nav").css('box-shadow', 'none');
            }
        });
    }
});

谢谢，我会帮它一把的。汉克斯，我会帮它一把的。很乐意帮忙很乐意帮忙。：）虽然此代码可以回答问题，但提供关于如何和/或为什么解决问题的附加上下文将提高答案的长期价值。虽然此代码可以回答问题，但提供关于如何和/或为什么解决问题的附加上下文将提高答案的长期价值。