jquery - position top inside position fixed div 总是为每个元素返回相同的值jquery

Question

我有一个固定的侧边栏，当它打开时，它会在整个页面上 float ，侧边栏具有固定的正文高度，侧边栏内的内容设置为 overflow-y: auto;这样当内容超过侧边栏高度时，它会添加一个滚动条!

现在侧边栏中有一些字段需要在提交侧边栏表单时进行验证，由于滚动显示错误的字段可能会向上并且用户可能位于侧边栏的底部所以我需要添加一个 scrollTop

问题是当试图获取元素的位置时它总是返回相同的值，即使对于单独的字段也是如此，这是我的代码!

HTML

  <form id="add_staff" method="post" action="{{url('saveStaff')}}" autocomplete="off">

    <div class="changepicture_overlay_container changepicture_overlay_container1 changepicture_overlay_container_hidden">
        <div class="changepicture">

            <div class="wrapper">

                <div class="sidebar-header">
                    <div class="float-left">
                        <i class="fas fa-user-plus"></i>
                        <h2>Add Staff</h2>
                    </div>
                    <div class="float-right">
                        <i class="fas fa-times"></i>
                    </div>
                </div>

                <div class="content">

                    <div class="status-float">


                        <div class="staff-checkbox inactive-box">
                            (In-Active)
                        </div>

                        <input type="checkbox" id="active" class="cbx hidden" name="status" value="1" />
                        <label for="active" class="lbl"></label>
                    </div>


                    <div class="sidebar-fields">

                        <div class="sidebar-fields-block">
                            <label for="name">Enter Full Name<span>*</span></label>
                            <input type="text" class="required_remove" id="name" name="name"/>
                            <p class="error">This Field is Required!</p>
                        </div>

                        <div class="sidebar-fields-block">
                            <label for="email">Enter Email<span>*</span></label>
                            <input type="text" class="required_remove" id="email" name="email"/>
                            <p class="error">This Field is Required!</p>
                        </div>

                        <div class="sidebar-fields-block">
                            <label for="password">Generate Password<span>*</span></label>
                            <input id="copied_link" class="required_remove" type="text" name="password"/>
                            <p class="error">This Field is Required!</p>
                            <i class="fas fa-undo fa-flip-horizontal generate-password"></i>
                            <i data-clipboard-action="copy" data-clipboard-target="#copied_link" class="far fa-copy clipboard"></i>

                        </div>

                        <div class="sidebar-fields-block">
                            <label for="phone">Enter Phone<span>*</span></label>
                            <input type="text" class="required_remove" id="phone" name="phone"/>
                            <p class="error">This Field is Required!</p>
                        </div>

                        <div class="sidebar-fields-block">
                            <label for="dob">Enter Date of Birth</label>
                            <input type="text" id="dob" name="DOB"/>
                            <p class="error">This Field is Required!</p>
                            <i class="fas fa-calendar-alt"></i>
                        </div>

                        <div class="sidebar-fields-block">
                            <label for="gender">Enter Gender</label>
                            <select id="gender" name="gender">
                                <option value="1">Male</option>
                                <option value="2">Female</option>
                            </select>
                            <i class="fas fa-caret-down"></i>
                        </div>

                        <div class="sidebar-fields-block">
                            <label for="staff">Enter Staff Department</label>
                            <select id="staff" name="department_id">

                            </select>
                            <i class="fas fa-caret-down"></i>
                        </div>

                        <div class="sidebar-fields-block">
                            <label for="lang0">Enter Primary language</label>
                            <input type="text" name="language[]"/>
                        </div>

                        <div class="append-language">

                        </div>

                        <div class="addmore">
                            <i class="fas fa-plus"></i>
                            <a>Add</a>
                        </div>

                    </div>

                    <div class="admin-staff">
                        <div class="checkbox-sidebar">
                            <input type="checkbox" id="Admin" class="cbx hidden" name="role" value="Admin"/>
                            <label for="Admin" class="lbl"></label>
                            <span>Admin</span>
                        </div>
                        <div class="checkbox-sidebar">
                            <input type="checkbox" id="Staff" class="cbx hidden" name="role" value="Staff"/>
                            <label for="Staff" class="lbl"></label>
                            <span>Staff</span>
                        </div>
                    </div>
                </div>
                <div class="sidebar-footer">
                    <div class="btn-box">
                        <a class="back"><i class="fas fa-chevron-left"></i>BACK</a>
                        <button type="submit">Create</button>
                        <a class="cancel">Cancel</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="overlay"></div>
    </div>
</form>

CSS

.changepicture_overlay_container {
    transition: right 0.3s ease;
    width: 0;
    height: 0;
}
.changepicture_overlay_container_hidden .changepicture{
    width: 580px;
    height: 100%;
    background: white;
    position: fixed;
    right: -580px;
    transition: right 0.3s ease;
    top: 0;
    border-left: 1px solid #808896;
    overflow-y: auto;
}
.changepicture_overlay_container_visible .content{
    padding-top: 90px;
    padding-bottom: 140px;
    padding-left: 40px;
    padding-right: 40px;
}
.changepicture_overlay_container2 .content{
    padding-top: 140px;
    padding-bottom: 250px;
}
.changepicture_overlay_container_visible .changepicture, .changepicture_overlay_container .overlay{
    right: 0px;
    transition: right 0.3s ease;
    z-index: 1000;
    min-height:100%;
}
.changepicture_overlay_container_visible .overlay {
    width: calc(100% - 580px);
    position: fixed;
    height: 100%;
    background: rgba(209,212,217, 0.9);
    right: 580px;
    transition: right 0.3s ease;
    z-index: 10000;
    top: 0;
}

JQuery

$("#add_staff").submit(function(event){
                event.preventDefault();
                $flag=true;
                if(!$("#name").val()){
                    $("#name").next("p.error").show();
                    $("#name").addClass("border-error");
                    taketotop($("#name"));
                    $flag=false;
                }
                if(!$("#email").val()){
                    $("#email").next("p.error").show();
                    $("#email").addClass("border-error");
                    taketotop($("#email"));
                    $flag=false;
                }
                if($("#email").val() && !validateEmail($("#email").val())){
                    $("#email").next("p.error").html("Please Enter Correct Email");
                    $("#email").next("p.error").show();
                    $("#email").addClass("border-error");
                    $flag=false;
                }
                if(!$("#copied_link").val()){
                    $("#copied_link").next("p.error").show();
                    $("#copied_link").addClass("border-error");
                    $flag=false;
                }
                if(!$("#phone").val()){
                    $("#phone").next("p.error").show();
                    $("#phone").addClass("border-error");
                    $flag=false;
                }
                if($flag){

                    $object = {
                        "_token": $('.getCsrfToken').val(),
                        "email": $("#email").val()
                    };

                    $.ajax({
                        type: 'post',
                        url: "{{url('car_get_with_stock_number_leads_full_data')}}",
                        data:$object,
                        beforeSend: function () {
                            loader_start();
                        },
                        success: function (data) {
                            loader_end();

                            //below line goes for if email exist
                            $("#email").next("p.error").html("Email Already Exist!");
                            $("#email").next("p.error").show();
                            $("#email").addClass("border-error");
                            //below line goes for if email exist

                            //else
                            //$("#add_staff")[0].submit();
                            //else
                        }
                    });
                }

            });

function taketotop($element){
                alert($element.position().top);
//                $('#sidebar_0 .changepicture_overlay_container .changepicture').animate({
//                    scrollTop: $("#sidebar_0 "+$element.trim()+"").position().top
//                }, 'slow');
            }

JSFIDDLE

上面的函数是出现问题的地方我已经提醒名称和电子邮件字段的位置顶部但它总是返回相同的值，即 22，我不知道有什么问题有帮助吗？

Answer 1

.position()获取元素相对于其父元素 的位置。尝试 .offset()相反，或者，如果不可能，请尝试获取父位置(和/或父的父)。

编辑:正如其他人在评论中所说，没有易于测试的代码片段很难确定，但它应该看起来像这样:

$('.content').position().top+
$('.sidebar-fields').position().top+
$element.closest('.sidebar-fields-block').position().top

而且它应该返回一些您不能使用的东西。有很多方法可以改进它(一些循环，添加或删除一些元素位置)，但它是我能给出的最准确的答案。

在 JSFiddle 和一些摆弄之后进行编辑:开始吧!

$('.changepicture').scrollTop($('.changepicture').scrollTop()+$element.offset().top);

有了它，您可以根据实际滚动调整您的定位。更健壮!仍然要注意多次调用函数 taketotop，因为它会在用户看到之前移动滚动条。例如，您可以在此处添加一些条件:

$("#email").addClass("border-error");
if($flag)taketotop($("#email"));

如果已经由名称错误触发，那么 taketotop 将不会被调用两次。