Kristof February 2016

CSS based on viewport height

Goldman Sachs has a pretty cool webpage here. What interests me about the page is that when you scroll down, you get a header appearing, which - depending on the section where you're at - has more of its squares turn from white to blue. I was wondering (because I can't seem to find the answer in the code), how exactly they made the scrollbar appear seemingly out of the blue (pun not intended), but also how the squares turn from white to blue depending on where you are on the page.

Answers


vlrprbttst February 2016

you can easily achieve an effect like that using jquery waypoints: http://imakewebthings.com/waypoints/guides/getting-started/

the first thing that comes to my mind is adding a class with display:block to the header when a certain section hits the top of the viewport to make it visible and playing with addClass and removeClass with css transitions for the squares.


Johan Degrieck February 2016

the most common way to do this is by detecting the position of the scrollbar with javascript. I've used the JQuery library for this demo.

here's some code (merely for illustration purpose!)

$(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');
  }    
                 
   
});
.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");
}
<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  

Post Status

Asked in February 2016
Viewed 3,072 times
Voted 12
Answered 2 times

Search




Leave an answer