php - 窗口滚动时按钮移动到导航栏

问题描述

我有 4 个按钮。按钮 1、按钮 2、按钮 3 和按钮 4。

当我想向下滚动窗口时，按钮应自动转到导航栏

我现在这样做，但不幸的是，当浏览器放大时，按钮会杂乱无章

我的代码。

<div class="row scr_bot">
                                    <div class="col-sm-10">
                                        <button class="btn btn-warning" type="button" onclick="draft()"><i class="fas fa-save"> </i> Button 1</button>

                                        <button class="btn btn-success" type="button" onclick="save()"><i class="fas fa-envelope"></i> Button 2</button>
                                        <button class="btn btn-danger" type="button" onclick="cancel()"><i class="fas fa-times"> </i> Button 3</button>

                                    <div class="col-sm-2 text-right">
                                            <button class="btn btn-primary btnAdd" type="button"><i class="fas fa-table"> </i> Button 4</button>
                                        </div>    
                                    </div>
                                </div>

我的 javascript

<script type="text/javascript">
    $(function(){
      $(window).scroll(function(){
        var aTop = 230;
        if($(this).scrollTop()>=aTop){
            // console.log('header just passed.');
            $('.scr_bot').css('position','fixed');
            $('.scr_bot').css('z-index','199');
            $('.scr_bot').css('margin-top','-590px');
            $('.scr_bot').css('margin-left','0px');
            // instead of alert you can use to show your ad
            // $('.scr_bot').fadeIn(10000);
        }else{
            $('.scr_bot').css('position','relative');
            $('.scr_bot').css('margin-top','0px');
            $('.scr_bot').css('margin-left','-20px');
            // $('.scr_bot').css('z-index','9999');
            // $('.scr_bot').css('margin-top','100px');
        }
      });
    });
</script>

标签： phplaravelbootstrap-4

php - 窗口滚动时按钮移动到导航栏

问题描述

解决方案

推荐阅读