Question

高盛有一个非常酷的网页here。我对该页面感兴趣的是，当您向下滚动时，会出现一个标题，根据您所在的部分，它会有更多的正方形从白色变为蓝色。我想知道（因为我似乎无法在代码中找到答案），他们究竟是如何使滚动条看起来似乎是蓝色的（双关语不是意图），还有方块如何从白色变为蓝色取决于你在页面上的位置。

Answer 1

您可以轻松实现类似于使用jquery航点的效果：http://imakewebthings.com/waypoints/guides/getting-started/

我想到的第一件事就是当某个部分点击视口的顶部以使其可见并使用display:block和{{1}时，在标题中添加一个带有addClass的类用正方形的css过渡。

Answer 2

最常见的方法是使用javascript检测滚动条的位置。我已经在这个演示中使用了JQuery库。

这里有一些代码（仅用于说明目的！）

＆＃13;

$(window).scroll(function (event) {
    var numOfButtons = 4;
    var scroll = $(window).scrollTop();
     var heightContainer =      $(".container").height();
  console.log('scrollPos', scroll);
   
  if(scroll > heightContainer/ numOfButtons){
    $(".header .button:nth-child(2)").addClass('act');
  }else{
    $(".header .button:nth-child(2)").removeClass('act');
  }
  
  if(scroll > (heightContainer/ numOfButtons)*2){
    $(".header .button:nth-child(3)").addClass('act');
  }else{
    $(".header .button:nth-child(3)").removeClass('act');
  }
                 
  if(scroll > (heightContainer/ numOfButtons)*3){
    $(".header .button:nth-child(4)").addClass('act');
  }else{
    $(".header .button:nth-child(4)").removeClass('act');
  }    
                 
   
});

＆＃13;

.header{
  height:50px;
  background-color:blue;
  color:white;
  position:fixed;
  top:0;
  left:0;
  width:100%
  
}
.button{
  display:inline-block;
  width:10px;
  height:10px;
  background-color:white;
  border-radius:20px;
}
.button.act{
  background-color:red;
}
h1{
  margin-top:60px;
}
.container{
  height:4000px;
  background:url("http://www.planwallpaper.com/static/images/518164-backgrounds.jpg");
}

＆＃13;

<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <body>
    <h1>Scroll demo</h1>
    <div class="header">
      <div class="button act"></div>
      <div class="button"></div>
      <div class="button"></div>
      <div class="button"></div>
    </div>
    <div class="container"><div id="mydiv"></div>
    </div>
  </body>

</html>

＆＃13;

enter link description here

CSS基于视口高度

2 个答案: