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

为什么不移动按钮，为什么不制作2个专用按钮组？菜单栏中的1和页面页脚中的1

如果您随后使用.scrollTop隐藏1并显示另一个。

因此您可以更轻松地设置两个按钮组的样式

Answer 2

使用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');
        }
      });
    });

Windows滚动时按钮移至导航栏

2 个答案: