I am trying to manipulate a class of a button.

The button should be wide at the beginning. When scrolling it should get smaller and hover to extend it again.

So far it works, but when I scroll up again to top<100, the button stays small.

Do you have an idea? I just went through a few things, unfortunately not the desired success.

$(window).scroll(function () {
    var scroll = $(window).scrollTop();
        $('.roundButtonBig').toggleClass("roundButton", ($(window).scrollTop() > 100)).animate(200);
});

$('.roundButtonBig').hover(function() {

    $(this).animate({"color":"#efbe5c","width":"200px","border-radius": "62px"}, 200);
    }, function() {
    $(this).animate({"color":"#e8a010","width":"60px"}, 200);
});

#screen {
  width:200px;
  height:4000px
}

.fixedButton{
    position: fixed;
    bottom: 0px;
    right: 0px; 
    padding: 20px;
}

.roundButtonBig {
    height: 60px;
    /* line-height: 80px; */
    width: 200px;
    border:none;
    background-color:#6FB583;
    font-size: 2em;
    font-weight: bold;
    border-radius: 62px;
    color: white;
    text-align: center;
    cursor:pointer;
    -webkit-transition: all .3s linear 0s;
    transition: all .3s linear 0s;
}

.roundButton{
  height: 60px;
  /* line-height: 80px; */  
  width: 60px;  
  font-size: 2em;
  font-weight: bold;
  border-radius: 50%;
  background-color: red;
  color: white;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all .3s linear 0s;
  transition: all .3s linear 0s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="screen">
  <a  href="">
   <div ></div>
  </a>
</div>

CodePudding user response：

First issue is that the if scrolltop>100 check means the hover event is only applied when the page is scrolled at startup - move the if scrolltop>10 check inside the {} of the hover function.

http://jsfiddle.net/8j5e2dmn/

This then leads to a new issue: if you scroll down, hover, then scroll back up, the button doesn't re-expand.

This is because you're mixing animate styles with toggleClass - so the animated style is applied to the element directly and doesn't get reset when you toggle the class.

Use the same animate/toggle in both scenarios.

Updated code: http://jsfiddle.net/8j5e2dmn/1/

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  $('.roundButtonBig').toggleClass("roundButton", ($(window).scrollTop() > 100));
  // this .animate(200) was not doing anything
});

$('.roundButtonBig').hover(
  function() {
    if ($(window).scrollTop() > 100) {
      $(this).toggleClass("roundButton");
    }
  },
  function() {
    if ($(window).scrollTop() > 100) {
      $(this).toggleClass("roundButton");
    }
  });

#screen {
  width: 200px;
  height: 4000px
}

.fixedButton {
  position: fixed;
  bottom: 0px;
  right: 0px;
  padding: 20px;
}

.roundButtonBig {
  height: 60px;
  /* line-height: 80px; */
  width: 200px;
  border: none;
  background-color: #6FB583;
  font-size: 2em;
  font-weight: bold;
  border-radius: 62px;
  color: white;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all .3s linear 0s;
  transition: all .3s linear 0s;
}

.roundButton {
  height: 60px;
  /* line-height: 80px; */
  width: 60px;
  font-size: 2em;
  font-weight: bold;
  border-radius: 50%;
  background-color: red;
  color: white;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all .3s linear 0s;
  transition: all .3s linear 0s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="screen">
  <a  href="">
    <div ></div>
  </a>
</div>

CodePudding user response：

Thanks, I was thinking too complicated again.

A hover in the css statement would have worked as well.

$(window).scroll(function () {
    var scroll = $(window).scrollTop();
        $('.roundButtonBig').toggleClass("roundButton", ($(window).scrollTop() > 100)).animate(200);
});

#screen {
  width:200px;
  height:4000px
}

.fixedButton{
    position: fixed;
    bottom: 0px;
    right: 0px; 
    padding: 20px;
}

.roundButtonBig {
    height: 60px;
    /* line-height: 80px; */
    width: 200px;
    border:none;
    background-color:#6FB583;
    font-size: 2em;
    font-weight: bold;
    border-radius: 62px;
    color: white;
    text-align: center;
    cursor:pointer;
    -webkit-transition: all .3s linear 0s;
    transition: all .3s linear 0s;
}

.roundButton{
  height: 60px;
  /* line-height: 80px; */  
  width: 60px;  
  font-size: 2em;
  font-weight: bold;
  border-radius: 50%;
  background-color: red;
  color: white;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all .3s linear 0s;
  transition: all .3s linear 0s;
}

.roundButton:hover {
  width:200px;
  border-radius: 62px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="screen">
  <a  href="">
   <div ></div>
  </a>
</div>