更改CSS滚动

后，我有一个导航栏，我用一些CSS代码不透明度：更改CSS滚动

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

所有我需要的是，用户向下滚动例如500像素之后，不透明度必须改为1.0。

我尝试了一些jQuery代码，但没有得到答案。另外我真的很难与Java一起工作，有时我不知道应该在哪里放置我的j代码！因此，如果有CSS来完成这一切，那将会很棒！如果没有，请注意多一点关于Java :)

例如去：hulu.com

来源

2015-02-08 HessamMT

来完成你想要做的是一些简单的JavaScript的组合最简单的方法（jQuery的动力在这种情况下）和CSS3转换。

我们将使用JS检查每个滚动事件的窗口滚动位置，并将其与#main元素底部的距离进行比较 - 如果滚动位置更大，则我们将应用类到表明我们已经滚动过去#main的正文，然后我们将使用CSS为该“状态”定义导航样式。

所以，我们的基本标记：

<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代码，以便它改变的不透明度时，它的“过去-为主。

来源

2015-02-08 08:49:44 Crezzur

如果你是找一个本地的解决方案，然后用这个代替

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

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

这里有一个现场演示

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

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

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

来源

2015-02-08 09:11:07

我发现THI s解决方案：

我写了两个css代码（例如一个& b）。在“一个”不透明度为0.8，并在“B”为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") 
     } 

});

感谢ü所有:)

来源

2015-02-09 05:30:56 HessamMT

更改CSS滚动

回答

相关问题