plugin-auto-focus/fixed-header.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>AutoFocus plugin - FormValidation</title>
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"
        />
        <link rel="stylesheet" href="/vendors/@form-validation/umd/styles/index.min.css" />

        <style>
            .header {
                background-color: #e5e5e5;
                border-bottom: 1px solid #ccc;
                padding: 1rem 0;
                text-align: center;
                position: fixed;
                z-index: 999;
                left: 0;
                top: 0;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <header class="header" id="header">Header</header>
        <div id="container" class="container" style="margin-top: 70px">
            <div style="border: 1px solid #ccc; height: 200px"></div>
            <form id="demoForm" method="POST">
                <div class="form-group">
                    <label>Product name</label>
                    <input type="text" class="form-control" name="name" />
                </div>

                <div class="form-group">
                    <label>Price</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">$</span>
                        </div>
                        <input type="text" class="form-control" name="price" />
                    </div>
                </div>

                <div class="form-group">
                    <label>Size</label>
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" name="size[]" value="s" />
                        <label class="form-check-label">S</label>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" name="size[]" value="m" />
                        <label class="form-check-label">M</label>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" name="size[]" value="l" />
                        <label class="form-check-label">L</label>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" name="size[]" value="xl" />
                        <label class="form-check-label">XL</label>
                    </div>
                </div>

                <div class="form-group">
                    <label>Available in store</label>
                    <div class="form-check">
                        <input type="radio" class="form-check-input" name="availability" value="yes" />
                        <label class="form-check-label">Yes</label>
                    </div>
                    <div class="form-check">
                        <input type="radio" class="form-check-input" name="availability" value="no" />
                        <label class="form-check-label">No</label>
                    </div>
                </div>

                <div class="form-group">
                    <!-- Do NOT use name="submit" or id="submit" for the Submit button -->
                    <button type="submit" class="btn btn-primary">Add product</button>
                </div>
            </form>
        </div>

        <script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
        <script src="/vendors/@form-validation/umd/plugin-auto-focus/index.min.js"></script>
        <script src="/vendors/@form-validation/umd/plugin-bootstrap/index.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function (e) {
                FormValidation.formValidation(document.getElementById('demoForm'), {
                    fields: {
                        name: {
                            validators: {
                                notEmpty: {
                                    message: 'The name is required',
                                },
                                stringLength: {
                                    min: 6,
                                    max: 30,
                                    message: 'The name must be more than 6 and less than 30 characters long',
                                },
                                regexp: {
                                    regexp: /^[a-zA-Z0-9_]+$/,
                                    message: 'The name can only consist of alphabetical, number and underscore',
                                },
                            },
                        },
                        price: {
                            validators: {
                                notEmpty: {
                                    message: 'The price is required',
                                },
                                numeric: {
                                    message: 'The price must be a number',
                                },
                            },
                        },
                        'size[]': {
                            validators: {
                                notEmpty: {
                                    message: 'The size is required',
                                },
                            },
                        },
                        availability: {
                            validators: {
                                notEmpty: {
                                    message: 'The availability option is required',
                                },
                            },
                        },
                    },
                    plugins: {
                        autoFocus: new FormValidation.plugins.AutoFocus({
                            // This will be called before the field gets focused
                            onPrefocus: function (e) {
                                const fieldEle = e.firstElement;

                                // Get the field container that also contains the field label
                                const fieldParent = fieldEle.closest('.form-group');

                                // Get the header height
                                const headerHeight = document.getElementById('header').getBoundingClientRect().height;

                                window.scrollTo(0, fieldParent.offsetTop - headerHeight);
                            },
                        }),
                        trigger: new FormValidation.plugins.Trigger(),
                        bootstrap: new FormValidation.plugins.Bootstrap(),
                        submitButton: new FormValidation.plugins.SubmitButton(),
                        icon: new FormValidation.plugins.Icon({
                            valid: 'fa fa-check',
                            invalid: 'fa fa-times',
                            validating: 'fa fa-refresh',
                        }),
                    },
                });
            });
        </script>
    </body>
</html>