Question

我有一个导航栏，我使用了一些css代码来实现不透明度：

background-color: #4b5253;
opacity: 0.8;
filter: alpha(opacity=80);

我需要的是，在用户向下滚动（例如500px）后，不透明度必须更改为1.0。

我尝试了一些jQuery代码，但我没有得到答案。我也很难与Java合作，有时候我不知道我应该把我的jcodes放在哪里！所以无论如何使用CSS都可以做到这一点，这将是伟大的！如果没有，请注意Java的更多信息：）

例如，请访问：hulu.com

Answer 1

如果您正在寻找原生解决方案，请改用

function changeCss () {
      var bodyElement = document.querySelector("body");
      this.scrollY > 500 ? bodyElement.style.opacity = .8 : bodyElement.style.opacity = 1;
    }

window.addEventListener("scroll", changeCss , false);

这是一个现场演示

＆＃13;

function changeCss () {
  var bodyElement = document.querySelector("body");
  this.scrollY > 500 ? bodyElement.style.opacity = .8 : bodyElement.style.opacity = 1;
}

window.addEventListener("scroll", changeCss , false);

＆＃13;

body{background-color: #4b5253;height: 1000vh}

＆＃13;

Answer 2

完成您尝试做的最简单的方法是结合使用一些简单的javascript（在这种情况下为jQuery）和CSS3过渡。

我们将使用JS检查每个滚动事件的窗口滚动位置，并将其与#main元素底部的距离进行比较 - 如果滚动位置较大，那么我们将适用身体的一个类，表示我们已经滚过#main，然后我们将使用CSS来定义该状态的导航样式。＆＃34;

所以，我们的基本标记：

<nav class="nav">
    <a href="#" class="logo">[logo]</a>
</nav>
<div id="main">#main</div>
<div id="below-main">#below-main</div>

我们的javascript：

// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();

// on scroll, 
$(window).on('scroll',function(){

    // we round here to reduce a little workload
    stop = Math.round($(window).scrollTop());
    if (stop > mainbottom) {
        $('.nav').addClass('past-main');
    } else {
        $('.nav').removeClass('past-main');
    }

});

而且，我们的风格：

.nav {
    background-color:transparent;
    color:#fff;
    transition: all 0.25s ease;
    position:fixed;
    top:0;
    width:100%;
    background-color:#ccc;
    padding:1em 0;
    /* make sure to add vendor prefixes here */
}

.nav.past-main {
    background-color:#fff;
    color:#444;
}

#main {
  height:500px;
  background-color:red;
}

#below-main {
  height:1000px;
  background-color:#eee;
}

Codepen的一个工作示例：http://codepen.io/taylorleejones/pen/KJsvz

在Whiteboard网站上，我们还采用了一些滚动限制和更复杂的样式语义，但这是它的要点。

更改css代码，使其在＆＃34; past-main时更改不透明度。

Answer 3

我找到了这个解决方案：

我写了两个css代码（例如a＆amp; b）。 in＆＃34; a＆＃34;不透明度为0.8，而在＆＃34; b＆＃34;是1.0，所以使用jquery我只是改变了我的事件中的css类：

$(window).scroll(function () {
    var $heightScrolled = $(window).scrollTop();
    var $defaultHeight = 500;

    if ( $heightScrolled < $defaultHeight )
    {
        $('#mynav').removeClass("b")
    $('#mynav').addClass("a")
        }
    else {
        $('#mynav').addClass("b")
        }

});

谢谢大家：）

滚动后更改CSS

3 个答案: