插入新的 DOM 元素后航路点设置得太高

Question

使用Waypoints：在页面上插入新元素（例如错误消息）时，垂直滚动路径点设置得比以前更高。

addWayPoints: function () {
            var self = this;

            this.$('.table-waypoint').waypoint({
                offset: 0,
                handler: function (direction) {
                    self.$hiddenHeadings.toggleClass('visible', direction === 'down');
                }
            });

            this.$('.table-end-waypoint').waypoint({
                offset: 165,
                handler: function (direction) {
                    self.$hiddenHeadings.toggleClass('visible', direction === 'up');
                }
            });
        },

Answer 1

我猜当您将元素定义为滚动点时，设置航路点会将其设置为距顶部或底部的像素高度，因此它不是航路点附加到的动态点。

您需要在添加或删除 DOM 元素后重置 waypoints。

        addWayPoints: function () {
            var self = this;

            this.$('.table-waypoint').waypoint({
                offset: 0,
                handler: function (direction) {
                    self.$hiddenHeadings.toggleClass('visible', direction === 'down');
                }
            });

            this.$('.table-end-waypoint').waypoint({
                offset: 165,
                handler: function (direction) {
                    self.$hiddenHeadings.toggleClass('visible', direction === 'up');
                }
            });
        },

        resetWaypoints: function (){
            Waypoint.destroyAll();
            this.addWayPoints();
        },

Answer 2

您可以在切换标题class后调用Waypoint.refreshAll()重新计算所有waypoints的触发点。

插入新的 DOM 元素后航路点设置得太高

Waypoint set too high up after inserting new DOM element

jquery-waypoints