jquery - 使水井漂浮在 body 上而不是将元素插入 body

Question

我有一个漂浮在我其余内容上的井。我遇到的问题是，当它加载页面时，它会下推其余内容。我该如何更改它以便它悬停在所有内容上并且不会在页面加载时将内容下推。

这是页面加载的图像。

这是向下滚动页面的图片

请注意，在第二张图片中，它是如何漂浮在内容之上的，但在第一张图片中，它是如何将内容向下推的。我应该更改什么，以便在加载井时不会将内容下推？

这是我的代码

<style>
    .well{
        margin-top: 20px;
        height: 300px;
        overflow-y:scroll;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }

    p#clients{
        margin-top: 10%;
    }

    #client-list{
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }

    .sticky {
        top: 0;
        position: fixed;
    }

    .menu {
        top: 0;
        position: -webkit-sticky;
        position: sticky;
        z-index: 1000;
        overflow-y: auto;
    }

    #client-chosen{
        height: 100px;
    }
</style>

@push('page-scripts')
<script>

    function getClients()
    {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type: 'Get',
            url: '/all-clients',
            success: function (jsonStr) {
                $('.individual-client').remove();
                $('.clients-email').remove();
                var filtered_list = '';
                for (var i = 0; i < jsonStr.length; i++) {

                    filtered_list+= "<div style='margin-bottom:3%;text-transform: none; '><input type='radio' class='form-check-input individual-client' id=" + jsonStr[i].id + " name=" + jsonStr[i].id + " value=" + jsonStr[i].id + "><p style='display: inline' class='clients-email'>&nbsp;" + jsonStr[i].email+ "</p></div>"
                }
                $('.clients-list').html(filtered_list);
            },
            error: function (msg) {
                console.log("Did not get all clients:" + msg);
            }
        })
    }

    $(document).ready(function() {
        getClients();
        $('#close-choose-client').click(function () {
            $('#client-list').hide();
        })


        $(".clients-list").on( "click",'input' ,function() {
            $("input").prop('checked', false);
            $(this).prop('checked', true);
            var id = $(this).val()
            setCookie("client-id", id);
            var text = $(this).siblings('.clients-email').text();
            $('#chosen-client').text("You are working with " + text);
        });

        $('#filter-clients').keyup(function () {
            var email = $('#filter-clients').val();
            if(email.length > 0){
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    type: 'Get',
                    url: '/filter-clients',
                    data: {
                        email: email,
                    },
                    success: function (jsonStr) {
                        $('.individual-client').remove();
                        $('.clients-email').remove();
                        var filtered_list = '';
                        for (var i = 0; i < jsonStr.length; i++) {

                            filtered_list+= "<div style='margin-bottom:3%;text-transform: none;'><input type='radio' class='form-check-input individual-client' id=" + jsonStr[i].id + " name=" + jsonStr[i].id + " value=" + jsonStr[i].id + "><p style='display: inline' class='clients-email'>&nbsp; " + jsonStr[i].email+ "</p></div>"
                        }
                        $('.clients-list').append(filtered_list);
                    },
                    error: function (msg) {
                        console.log("Did not filter clients:" + msg);
                    }
                })
            }else{
                getClients();
            }
        })

    });
</script>
@endpush

    <div class="col-md-2 xs-hidden text-left menu">
        <div class="container-fluid">
            <div class="well row" id="client-list">
                <a class="fa fa-times pull-right" id="close-choose-client" style="color: black;"></a>
                <div class="form-group">
                    <label for="usr">Filter Clients By Email</label>
                    <input type="text" class="form-control" id="filter-clients">
                </div>
                <p id="clients">Or Choose A Client</p>
                <form action="">
                    <div class="form-check">
                        <label class="form-check-label clients-list">
                            <input type="radio" class="form-check-input individual-client">
                        </label>
                    </div>
                </form>
            </div>
            <div class="well row" id="client-chosen">
                <a class="fa fa-times pull-right" id="close-choosen-client" style="color: black;"></a>
                <div class="form-group">
                    <p id="chosen-client">You have not chosen a client</p>
                </div>
            </div>
        </div>
    </div>

Answer 1

尝试使用 position: fixed 而不是 sticky。这将从流程中删除该元素，并且不会干扰页面的其余部分。