固定按钮切换 class 通过滚动和 hover

Question

我正在尝试操作按钮的 class 。

按钮的开头应该是宽的。 滚动时它应该变小并且 hover 再次扩展它。

到目前为止它可以工作，但是当我再次向上滚动到 top<100 时，按钮仍然很小。

你有想法吗？ 我刚刚经历了一些事情，不幸的是没有取得理想的成功。

 $(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>

Answer 1

第一个问题是if scrolltop>100检查意味着 hover 事件仅在页面在启动时滚动时应用 - 将if scrolltop>10检查移到 hover ZC1C425268E68385D14Z5074F 的{}内

http://jsfiddle.net/8j5e2dmn/

这会导致一个新问题：如果向下滚动，hover，然后向上滚动，按钮不会重新展开。

这是因为您将动画 styles 与 toggleClass 混合 - 因此动画样式直接应用于元素，并且在切换 class 时不会重置。

在两种情况下使用相同的动画/切换。

更新代码： 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>

Answer 2

谢谢，我又想得太复杂了。

css 语句中的 hover 也可以正常工作。

 $(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>