diff --git a/src/survey.ts b/src/survey.ts index 05ddcfad90..6dedd72118 100644 --- a/src/survey.ts +++ b/src/survey.ts @@ -7731,10 +7731,20 @@ export class SurveyModel extends SurveyElementCore disposeCallback: () => void; private onScrollCallback: () => void; + // private _lastScrollTop = 0; + public _isElementShouldBeSticky(selector: string): boolean { + if (!selector) return false; + const topStickyContainer = this.rootElement.querySelector(selector); + if (!!topStickyContainer) { + // const scrollDirection = this.rootElement.scrollTop > this._lastScrollTop ? "down" : "up"; + // this._lastScrollTop = this.rootElement.scrollTop; + return this.rootElement.scrollTop > 0 && topStickyContainer.getBoundingClientRect().y <= this.rootElement.getBoundingClientRect().y; + } + return false; + } public onScroll(): void { if (!!this.rootElement) { - const topStickyContainer = this.rootElement.querySelector(".sv-components-container-center"); - if (!!topStickyContainer && topStickyContainer.getBoundingClientRect().y <= this.rootElement.getBoundingClientRect().y) { + if (this._isElementShouldBeSticky(".sv-components-container-center")) { this.rootElement.classList && this.rootElement.classList.add("sv-root--sticky-top"); } else { this.rootElement.classList && this.rootElement.classList.remove("sv-root--sticky-top"); diff --git a/tests/surveytests.ts b/tests/surveytests.ts index d983fd1606..e06530298b 100644 --- a/tests/surveytests.ts +++ b/tests/surveytests.ts @@ -20169,7 +20169,28 @@ QUnit.test("Delete panel with questions", (assert) => { assert.notOk(survey.getPanelByName("panel1"), "#5"); assert.notOk(survey.getQuestionByName("question1"), "#6"); }); +QUnit.test("_isElementShouldBeSticky", (assert) => { + const survey = new SurveyModel({}); + const topStickyContainer: any = { + getBoundingClientRect: () => ({ y: 64 }) + }; + const rootElement: any = { + getBoundingClientRect: () => ({ y: 64 }), + querySelector: () => topStickyContainer, + scrollTop: 0 + }; + survey.rootElement = rootElement; + + assert.notOk(survey._isElementShouldBeSticky(".test"), "no scrolling"); + rootElement.scrollTop = 50; + assert.ok(survey._isElementShouldBeSticky(".test"), "content is scrolled"); + + assert.notOk(survey._isElementShouldBeSticky(""), "empty selector - always false (with scroll)"); + + rootElement.scrollTop = 0; + assert.notOk(survey._isElementShouldBeSticky(""), "empty selector - always false (no scroll)"); +}); QUnit.test("survey navigateToUrl encode url", function (assert) { var survey = new SurveyModel({ questions: [