Question

我有一个固定的侧边栏，该侧边栏在打开时会浮动在整个页面上，侧边栏具有固定的正文高度，并且侧边栏内的内容设置为df_array.append(self.data[int(length/4), :]) ...，以便当内容大于侧边栏高度可添加滚动条！

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

问题是什么时候尝试获取元素的位置，即使对于单独的字段，它也总是返回相同的值，这是我的代码！

HTML

scrollTop

CSS

  <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>

JQuery

.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;
}

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已被名称错误触发，则不会被调用两次。

位置顶部内部位置固定div始终为每个元素jquery返回相同的值

1 个答案: