Кнопка переместится на панель навигации при прокрутке окна

Question

у меня 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>

Answer 1

Использование 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','99');
            $('.scr_bot').css('margin-top','-590px');
            $('.scr_bot').css('margin-left','20px');
            // 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');
        }
      });
    });

Answer 2

Вместо того, чтобы перемещать кнопки, почему бы не создать 2 выделенные группы кнопок?1 в строке меню и 1 в нижнем колонтитуле страницы

Если затем вы используете .scrollTop, чтобы скрыть 1 и отобразить другой.

Таким образом, вы можете проще стилизовать обе группы кнопок