Problem with div size when scrolling page

Navigation
0

I've developed an effect that decreases the height of my div when I scroll on the page but when I use scroll the effect usually occurs more when I upload the page div does not return to normal would like to know why the code follows: [![

var scrollTimer = null;
$(window).scroll(function() {
  var top = $(document).scrollTop();
  clearTimeout(scrollTimer);
  scrollTimer = setTimeout(
    function() {
      console.log(top);
      if (top == 1500) {
        $(".spaces-box").animate({
          height: '280px'
        });
        $(".description-events-box").animate({
          padding: '130px 0'
        });
      } else {
        $(".spaces-box").animate({
          height: '100px'
        });
        $(".description-events-box").animate({
          padding: '60px 0'
        });
      }
    }, 200);

});
.spaces-box {
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  height: 280px;
  cursor: pointer;
  display: inline-flex;
  width: 100%;
}

.spaces-box .description-events-box {
  padding-top: 130px;
  font-size: 0.8em;
}

.spaces-box .-bg1 {
  background-color: #333;
  background-repeat: no-repeat;
  height: 100%;
  width: 25%;
}

.spaces-box .-bg1:hover {
  background-color: #ff283b;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="spaces-box">
  <div class="work -bg1" id="p1">
    <i class="icon -workshop"></i>
    <p class="description-events-box workshop">Workshops</p>
  </div>
</div>

<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>

] 2 2

    
asked by anonymous 11.04.2017 / 14:07

1 answer

2

Use 

//$(window).scrollTop() == 0 || 0 == false
if(!$(window).scrollTop())

instead of 

if(top == 1500)

If it is at the top of the page, div returns to normal 

var scrollTimer = null;
$(window).scroll(function() {
  var top = $(document).scrollTop();
  clearTimeout(scrollTimer);
  scrollTimer = setTimeout(
    function() {
      //console.log(top);
      if (!$(window).scrollTop()) {
        $(".spaces-box").animate({
          height: '280px'
        });
        $(".description-events-box").animate({
          padding: '130px 0'
        });
      } else {
        $(".spaces-box").animate({
          height: '100px'
        });
        $(".description-events-box").animate({
          padding: '60px 0'
        });
      }
    }, 200);

});
.spaces-box {
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  height: 280px;
  cursor: pointer;
  display: inline-flex;
  width: 100%;
}

.spaces-box .description-events-box {
  padding-top: 130px;
  font-size: 0.8em;
}

.spaces-box .-bg1 {
  background-color: #333;
  background-repeat: no-repeat;
  height: 100%;
  width: 25%;
}

.spaces-box .-bg1:hover {
  background-color: #ff283b;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="spaces-box">
  <div class="work -bg1" id="p1">
    <i class="icon -workshop"></i>
    <p class="description-events-box workshop">Workshops</p>
  </div>
</div>

<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
<p>texto de teste</p>
    
11.04.2017 / 14:12
Insert data into a table with foreign key in ID Restart service when killed by system automatically