Currently, I am attempting to modify the class of a button on my website.
The initial state of the button is wide, but as the user scrolls, it should shrink in size. When hovering over the shrunken button, it should expand back to its original width.
Although the functionality partially works, I have encountered an issue where, upon scrolling back up to the top (less than 100), the button remains small.
Any suggestions or insights would be greatly appreciated. I have tried various approaches without achieving the desired outcome.
$(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>