Change CSS After Scrolling

问题

I have a nav-bar that I used some css codes for opacity:

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

All I need is, after user scrolls down for example 500px, opacity must change to 1.0.

I tried some jQuery code but I didn't get answer. Also I'm really weak to work with JavaScript and sometimes I don't know where should I put my code! So if is there anyway to do it all with CSS, it will be great! If not, please note a little more about JavaScript :)

For example go to: hulu.com

回答1:

If you are look for a native solution then use this instead

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

here is a live demo

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

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

body{
  background-color: white;
  height: 1000vh
}
nav{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  text-align: center;
  background: blueviolet
}
nav li{display: inline-block}
nav a{
  padding: 10px 12px;
  color: white;
  text-transform:uppercase;
  text-decoration: none
}

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

回答2:

The easiest way to accomplish what you're trying to do is a combination of some simple javascript (jQuery powered in this case) and CSS3 transitions.

We'll use JS to check for the windows scroll position on every scroll event and compare it to the distance of the bottom of the #main element - if the scroll position is greater, then we'll apply a class to the body to indicate we've scrolled past #main, and then we'll use CSS to define the nav styling for that "state."

So, our basic markup:

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

And our 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');
    }

});

And, our styles:

.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;
}

A working example on Codepen: http://codepen.io/taylorleejones/pen/KJsvz

On the Whiteboard site, we also employ some scroll throttling and a bit more complicated styling semantics, but this is the gist of it.

Change the css code so it changes opacity when its "past-main.

回答3:

i found this solution:

i wrote two css code (for example a&b). in "a" opacity was 0.8 and in "b" was 1.0, so with jquery i just changed the css class in my event:

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

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

});

thank u all :)

来源：https://stackoverflow.com/questions/28392145/change-css-after-scrolling

标签

javascript

css

scroll