Question

当你向下滚动时，我试图让我的标题更改不透明度 aproximatly 500px down 。我正在制作一个带有bxslider前面标题的单页，所以当我向下滚动时，标题的不透明度会增加，因为文本仍然需要可读。

http://ironsummitmedia.github.io/startbootstrap-scrolling-nav/

我想要这样的东西，但我觉得很难编辑

我已经尝试在这里寻找答案，但只有接近这一点的是：Header changes as you scroll down (jQuery)或Fade opacity when scrolling但是一个对我不起作用，另一个是难以理解和改变< / p>

<header class="main-header">
        <img src="images/logo.png"/>
        <nav>
            <a id="active" href="#Platenbeurs">Platenbeurs</a>
            <a href="#Voorstelling">Voorstelling</a>
            <a href="#Planning">Planning</a>
            <a href="#Grondplan">Grondplan</a>
            <a href="#PraktischeInfo">Praktische Info</a>
            <a href="#Bestel">Bestel</a>
        </nav>
</header>

修改

这是用于查看标题实际上不是不透明度1的css代码。

.main-header{ position: fixed; max-width: 1024px; width: 100%; height: 100px; padding: 1%; text-align: right; background: rgba(255,255,255,0.2); border-top: 5px solid black; border-bottom: 5px solid black; }
.main-header nav a{ color: white; text-decoration: none; opacity: 1; }

Answer 1

如果自己修好了......

HTML

<header class="main-header clearfix">
    <a href="#Top"><img src="images/logo.svg"/></a>
    <nav>
        <a href="#Platenbeurs">Platenbeurs</a>
        <a href="#voorstelling">Voorstelling</a>
        <a href="#artiesten">Artiesten</a>
        <a href="#Planning">Planning</a>
        <a href="#Grondplan">Grondplan</a>
        <a href="#PraktischeInfo">Praktische Info</a>
        <a href="#Bestel">Bestel</a>
    </nav>
</header>

CSS

.main-header{
    position: fixed;
    width: 100%;
    z-index: 101;
    padding: 15px;
    text-align: right;
    background-color: rgba(0,0,0,0.2);
    border-top: 5px solid black;
}
.main-header nav a{
    color: white;
    text-decoration: none;
    opacity: 1;
}

的Javascript

$(window).scroll(function(event){

        if($(document).scrollTop() > 300){
            if(header.data('opacity') == 'start'){
                header.data('opacity','scrolled');
                header.css("background", "rgba(0,0,0,1)");
            }
        }else{
            if(header.data('opacity') == 'scrolled'){
                header.data('opacity','start');
                header.css("background", "rgba(0,0,0,0.2)");
            }
        }
    });

Answer 2

标题的不透明度已为1。您无法增加不透明度，而是可以在滚动时设置标题的背景颜色。请参阅以下代码段：http://jsfiddle.net/uy25hw21/

向下滚动时标题会更改不透明度

2 个答案: