CODEWITHSUNDEEP
jqueryhtmlcssgoogle-chrome
Heibol
Heibol

Reputation: 13

Conflict in Chrome with smooth scrolling

I'm doing a website with a fixed nav bar for using "Smooth scrolling" using jQuery with jQuery UI and I'm trying to do a "fixed" gradient. See my JSfiddle HERE.

The problem is that the scrolling only works with Firefox. It does not work in Chrome or Safari.

html, body {
  overflow:hidden;
  height:100%;
  }

Upvotes: 1

Views: 681

Answers (1)

osylvain
osylvain

Reputation: 26

The overflow: hidden on the body element is the problem.

Another way you could do this would be to add a div that takes all the space available on your screen. The div must have a fixed position and a z-index lower than the other elements of your page. Here's the css:

div {
    background-color:#70e8e6;
    background:linear-gradient(#70e8e6 40%, #5f5f5f 80%);
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
}

Then, apply your gradient to the div instead of the body.

I updated your jsfiddle with this solution: http://jsfiddle.net/dskaddeb/1/

Upvotes: 1

Related Questions