Skip to content

🖍 Restrict page attachment sticky header to non-iOS, non-Safari surfaces #36133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gmajoulet merged 1 commit into from
Sep 23, 2021
Merged

🖍 Restrict page attachment sticky header to non-iOS, non-Safari surfaces #36133

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Restrict page attachment sticky header to non-iOS, non-Safari surfaces.
  • Loading branch information
@coreymasanto
coreymasanto committed Sep 22, 2021
commit c969f9edc74270873874361ff9997f2c1bf87621
19 changes: 12 additions & 7 deletions extensions/amp-story/1.0/amp-story-draggable-drawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,13 +197,18 @@ export class DraggableDrawer extends AMP.BaseElement {
this.close_();
});

// For displaying sticky header on mobile.
new this.win.IntersectionObserver((e) => {
this.headerEl.classList.toggle(
'i-amphtml-story-draggable-drawer-header-stuck',
!e[0].isIntersecting
);
}).observe(spacerEl);
// For displaying sticky header on mobile. iOS devices & Safari are
// excluded because the sticky positon has more restrictive functionality
// on those surfaces that prevents it from behaving as intended.
const platform = Services.platformFor(this.win);
if (!platform.isSafari() && !platform.isIos()) {
new this.win.IntersectionObserver((e) => {
this.headerEl.classList.toggle(
'i-amphtml-story-draggable-drawer-header-stuck',
!e[0].isIntersecting
);
}).observe(spacerEl);
}

// Update spacerElHeight_ on resize for drag offset.
new this.win.ResizeObserver((e) => {
Expand Down