Search code examples
jqueryscrollstickysmooth-scrolling

Smoothscroll.js blocking scroll on opera but if removed breaks sticky header


sorry if this has been previously resolved, I looked but couldn't find a solution. I am very new to jQuery, usually relying on the template's functionality.

Problem: 1- smoothscroll.js breaks scroll in Opera. 2- getting rid of it fixes scroll in Opera but breaks sticky header in all browsers 3- the version of Smoothscroll I have is not the latest. As soon as I update it to the latest one, scroll gets fixed in Opera but sticky header still breaks

Here are the links: Without a link to smoothscroll: http://econocard.ca/demo/no-smoothscroll.html

With template's default smoothscroll: /demo/smoothscroll-enabled.html

With the latest smoothscroll: demo/smoothscroll-latest.html

I am ok with no smoothscroll, it seems to be buggy and unnecessary in general, but I need to fix sticky header.


Solution

  • There problem is Opera for whatever reason, isn't adding the style="height: auto;" to the <html> element. All other browsers are doing this automatically from some unknown script. I tried tracing which function was applying this but it's not obvious at all.

    Here's some solutions you can do to fix it:

    1. Add a script to the bottom of the page which adds these style manually (probably the best solution):

       <script>
        $( document ).ready(function() {
           $('html').css({"height": "auto"});
        })
       </script>
      
    2. Remove the CSS entry (style.css:70) which applies a fixed height of 100% to the <html> element (this will definitely fix the problem but may cause other issues with your preloader animation).

      html,
      body {
        width: 100%;
        overflow-x: hidden;
      }