Scroll not working while hovering fixed element

Question

To make this short, I have a site with two tags, one fixed to the left and one fixed to the right of the screen. When you're not hovering them, you can scroll as usual but when you mouse over them you can no longer scroll until you mouse out of them.

The site is - http://www.kuhlswaine.com

Here are the two tags I'm referring to along with their CSS -

CSS & HTML

    #hover-zone-left {
      background-color: transparent;
      height: 100%;
      left: 0;
      position: fixed;
      top: 0;
      width: 10%;
      z-index: 9;
    }
    #hover-zone-right {
      background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
      height: 100%;
      position: fixed;
      right: 16px;
      top: 0;
      width: 10%;
      z-index: 99999;
    }

<a id="hover-zone-left" class="prev-button special-anchor hover-zone" href="#"></a>
<a id="hover-zone-right" class="next-button special-anchor hover-zone" href="#"></a>

Please disregard any messy HTML/CSS, I've inherited this project from the previous person who built it so I apologize in advance. — user3817824, Jan 08 '15 at 17:03
possible duplicate of [A way to scroll an underlying div when mouse is on top of a fixed div?](http://stackoverflow.com/questions/13494850/a-way-to-scroll-an-underlying-div-when-mouse-is-on-top-of-a-fixed-div) — Phantom Watson, Jan 08 '15 at 17:31
I did come across that question, and I tried to implement the solution for it but did not have any luck. — user3817824, Jan 08 '15 at 17:44
Just so that solution can be ruled out, can you show how you implemented it and describe the results? Did any Javascript errors pop up in the console? — Phantom Watson, Jan 08 '15 at 21:50
I tried placing this code in the header and then in the footer - `$('.hover-zone').on('mousewheel DOMMouseScroll', function(event) { $('#home').scrollTop($('#home').scrollTop() - (event.originalEvent.wheelDelta || -event.originalEvent.detail*30)); });` Where the two items with the class .hover-zone would be targeted inside the container #home — user3817824, Jan 08 '15 at 22:13
In the current code on http://www.kuhlswaine.com/, there's a `` that loads before `
` is added dynamically. jQuery is likely returning the link when you call `$('#home')`. — Phantom Watson, Jan 08 '15 at 22:17
I see, can you provide a cleaner way you would write that in order to get it to behave the intended way? — user3817824, Jan 08 '15 at 22:25
If you just change the ID of that link (e.g. ``), the jQuery solution might start working for you. — Phantom Watson, Jan 08 '15 at 22:42
Note the Javascript error that page is generating: `TypeError: $(...).on is not a function`. The version of jQuery where `.on()` was added [was 1.7](http://api.jquery.com/on/), and your page is running version 1.4.2. — Phantom Watson, Jan 09 '15 at 19:56
So all I should need to do is update the jQuery file to 1.7 or above and that will enable this to work? — user3817824, Jan 09 '15 at 20:08

Scroll not working while hovering fixed element

CSS & HTML

0 Answers0