Problem with div size when scrolling the page

Asked

Viewed 46 times

0

Well I’ve developed an effect that diminishes the height of mine div when I scroll on the page but when I use the scroll the effect usually occurs more when I go up the page to div does not return to normal would like to know why follows the code: inserir a descrição da imagem aqui [![

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>
<div class="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

javascript html5 css3

1 answer

2


Usa 

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

instead of 

if(top == 1500)

If he’s at the top of page a div back 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>
<div class="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>

  • Cara vlw by the answer but it takes me another doubt if I wanted that effect happens at a certain point on the page without being at the top when the scroll is = 0 has as ? type to roll the page in 350px from this the active effect and when it is less than these 350px it returns to normal

  • @Kirito if I understood what you want, yes, with the method I used in if, scrollTop(); you can store the position, for example: var scroll = $(window). scrollTop(); and from there you do whatever you want, if(scroll>350) /back to normal... maybe it wasn’t clear to you that scrollTop() is also used to pick up the scrollbar position.

Browser other questions tagged javascript html5 css3

You are not signed in. Login or sign up in order to post.