Question 36807 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Fixed Button toggle class by scroll and hover – Jquery

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 class="fixedButton" href="">
   <div class="roundButtonBig"></div>
  </a>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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 class="fixedButton" href="">
   <div class="roundButtonBig"></div>
  </a>
</div>


  2. 0

    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 class="fixedButton" href="">
    <div class="roundButtonBig"></div>
  </a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search