Reputation: 13
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
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