CODEWITHSUNDEEP
htmlcss
Ryan Prentiss
Ryan Prentiss

Reputation: 1642

Position Fixed Element is Shifting on Scroll

Hamburger icon is position fixed. When scrolling down the icon moves up a few pixels before stopping. When scrolling up the icon returns to its original position. I cannot find the cause of this bug.

HTML

<div class="rdi__menu-btn">
    <i class="open">menu</i>
    <i class="close">close</i>
</div>

CSS

div.rdi__menu-btn {
    position: fixed;
    top: 0;
    left: 0;
}
div.rdi__menu-btn i {
    margin: 0;
    padding: 8px;
    cursor: pointer;
}

The issue seems not to be with the fixed element, but instead SquareSpace injected .sqs-block {padding-bottom: 17px} which is causing the page to scroll slightly even when content does not overflow the page. Weirdly, this is not happening with my prior projects on the platform.

Upvotes: 0

Views: 3249

Answers (2)

Andrew Savetchuk
Andrew Savetchuk

Reputation: 1610

This is what causes a problem, if you remove it from your CSS problem gone.

.sqs-layout > .sqs-row {
    margin-left: -17px;
    margin-right: -17px;
}

Or if you want to keep margins you can add overflow-x: hidden property to your .sqs-layout class:

.sqs-layout {
    overflow-x: hidden;
}

Upvotes: 1

Henfs
Henfs

Reputation: 5411

In your head tag, change

<meta name="viewport" content="width=device-width, initial-scale=1.0">

for

<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi">

Then, disable and enable the device toolbar again to check it.
Sometimes a more complete viewport <meta> tag is required in order to some properties work properly.

Upvotes: 4

Related Questions