使用javascript尽快将背景更改为透明

Changing background to transparent as soon as possible with javascript

本文关键字：透明 背景 javascript 使用      更新时间：2023-09-26

我正在为我的网站制作标题，我想在页面通过JavaScript加载后立即将其背景设置为透明。我试过一些方法，但没有成功。我在main.css中放入的CSS会覆盖它。我制作了这个脚本：

    $(window).scroll(function(){
                var $top=$(window).scrollTop();
                var $nav = $('.navigation');
                if($top>80){$nav.css({
                    'background-color':'#E6C0E9', 
                    'position':'fixed',
                    'opacity':'0.9'
                });}
                else{$nav.css({
                    'background-color':'Transparent',
                    'position':'absolute'
                });}
                })
});

它将其更改为透明，但只有在我向下滚动80像素然后再向上滚动之后。我需要它立即改变。

问题出在if语句上。按照你的代码编写方式，你只在距离顶部80个像素时应用不透明度。从代码中删除if($top>80)，并将其设置为在加载时透明。

$( document ).ready(function() {
    $nav.css({
        'position':'fixed',
        'background-color':'Transparent'   
    })
});

您也可以简单地从一开始就在CSS中设置它。我不确定你是否有理由用JS处理这个问题。

为该页面创建一个新的样式表，并为该部分设置导航的CSS：

.navigation {
    'position':'fixed',
    'background-color':'Transparent'
}

$(window).scroll(function() {
    var $top = $(window).scrollTop(),
        $nav = $(".navigation");
    if ($top >= 80) {
        $nav.addClass("scroll");
    } else {
        $nav.removeClass("scroll");
    }
});

然后在CSS中：

.navigation {
    background: transparent;
    position: absolute;
}   
.navigation.scroll {
    background-color: #E6C0E9;
    position: fixed;
    opacity: 0.9;
}
相关文章：