How to make an element slide up the page smoothly?

Question

I have the following code that contains positioned hidden div (.converter) and I use JS to make it slide up and down based on the user's scroll. But I would like to make it smoothly and I thought transition would do the job.

window.addEventListener('scroll', function() {

  var scroll = window.pageYOffset || document.documentElement.scrollTop;

  var element = document.querySelector(".converter");

  if (scroll >= 400) {
    element.classList.add("atcbottomactive");
  } else {
    element.classList.remove("atcbottomactive");
  }

});

.converter {
 position: fixed; 
 height: 60px; 
 width: 100%; 
 bottom: -200; 
 background: red; 
 transition: 1s;
 z-index: 10000;
}

.ccontent {
 display: inline-flex;
 width: 100%;
 padding: 10px 5%;
}

.atcbottomactive{
 bottom:0;
 transition: 1s;
}

.page {
  background: green;
  height: 1500px;
  width: 100%;
 }

<div class="page">Scroll me: 400px</div>
<div class="converter">
  <div class="ccontent"></div>
</div>

Thanks in advance

score 3 · Accepted Answer · answered May 22 '19 at 22:15

3

So close! All you were missing was the 'px' on your .converter class bottom attribute. Because -200 isn't a valid bottom, you were going from an unset bottom to 0px, which cant be animated/ transitioned.

window.addEventListener('scroll', function() {

  var scroll = window.pageYOffset || document.documentElement.scrollTop;

  var element = document.querySelector(".converter");

  if (scroll >= 400) {
    element.classList.add("atcbottomactive");
  } else {
    element.classList.remove("atcbottomactive");
  }

});

.converter {
 position: fixed; 
 height: 60px; 
 width: 100%; 
 bottom: -200px; 
 background: red; 
 transition: 1s;
 z-index: 10000;
}

.ccontent {
 display: inline-flex;
 width: 100%;
 padding: 10px 5%;
}

.atcbottomactive{
 bottom:0;
 transition: 1s;
}

.page {
  background: green;
  height: 1500px;
  width: 100%;
 }

<div class="page">Scroll me: 400px</div>
<div class="converter">
  <div class="ccontent"></div>
</div>

answered May 22 '19 at 22:15

nathan.medz

1,595
11
21

it's more suitable to close the question as *simple typo error* – Temani Afif May 22 '19 at 22:16
@TemaniAfif I totally disagree. If he was confused enough to post this as a question then I doubt closing it as a typo would help him understand why his code wasn't working. – nathan.medz May 22 '19 at 22:23
so how would you describe a *simple typo error* question? ... closing the question will also help him because he will know that he faced a simple typo error like you have answered – Temani Afif May 22 '19 at 22:28
2

@TemaniAfif I would consider a simple typo error something like a misspelled css selector. I see this as different because not including units is valid for some css attributes (flex) or in some cases (0), just not this one. – nathan.medz May 22 '19 at 22:32
well, this is the true story of SO, we vote to close good questions because we don't understand them (ex: https://stackoverflow.com/q/56186202/8620333) and we answer/upvote *typo* questions instead of educating user on how to read the doc, debug code, check the console, etc, etc. let's hope we won't have a third question about the same code (the first one here: https://stackoverflow.com/q/56264553/8620333) – Temani Afif May 22 '19 at 22:55
1

@nathan.medz Thanks a lot! It really wanst something I forget, I just thought I could use without the 'px', since it worked ok, except for the transition. – Batman May 23 '19 at 02:51
@TemaniAfif, what "voting to close good questions because we don't understand them" has to do with the fact of answering a question that YOU think it was a typo one? And what's the problem of having two different questions about the same part of the code? I am asking all of this to know if I really made any mistake. – Batman May 23 '19 at 02:58

How to make an element slide up the page smoothly?

1 Answers1