CODEWITHSUNDEEP
javascriptjquerycss
Janath
Janath

Reputation: 1248

How to stop position: fixed jumps to top

I am developing hamburger sidebar menu for my website. This my current work.

Jsfiddle

I just want to stop scrolling when hamburger menu expanded. So I've added overflow: hidden to body when menu is expanded. (click toggle for body element $('body').toggleClass('scroll-lock'); )

The problem

I have tested this in ios both chrome and safari browsers. Seems like overflow: hidden not working fine. I have googled and found out that I need to add position:fixed also. Used that and working fine. But when I scroll down a bit and click my hamburger menu, it will work but jumps to top!

I have googled and tried so many times but didn't work any pure css methods.

.scroll-lock{
  overflow: hidden;
  position: fixed;
}

I have a bit js,jquery knowledge.

But I have an idea. How about using jquery .scrollTop() function to archive this? Found this resource Jsfiddle

Any help?

Upvotes: 1

Views: 2760

Answers (1)

Sajad Mirzaei
Sajad Mirzaei

Reputation: 2873

maybe this solution help you:

1- change position from fixed to absolute (scroll-lock)

2- change parent position to relative

3- (optional) top:10px;left:10px;(more or less than 10) (scroll-lock)

Upvotes: 1

Related Questions