Parallax scrolling broken when user hits back from linked page

Issue #5 new
Jacob Green created an issue

Hi,

I really like your theme, but noticed there's an issue when a user clicks on a link in a post and then clicks the back button to return to that post from the page they were linked to. Full rundown:

  1. User visits post page. They scroll down at bit and click on a link.
  2. They hit back from the external page. They are directed back to the post.
  3. onReady fires. Since the page does not load at the top (because they hit back), the parallax calculation gets messed up and results in the post title loading overtop of the text until the user scrolls.

I fixed this by changing

// If large viewport and not mobile, parallax the title
  if(!isMobile) {
    $(window).scroll(function() {
      if(isLargeViewport()) {
        slidingTitle();
      }
    });
  }

to

// If large viewport and not mobile, parallax the title
  if(!isMobile && $(this).scrollTop() === 0) {
    $(window).scroll(function() {
    console.log($(this).scrollTop());
      if(isLargeViewport()) {
        slidingTitle();
      }
    });
  } else {
    unFixTop();
  }

  function unFixTop() {
    $(".art-header").css("height", 600);
    $(".nav").css("position", "relative");
    $(".art-header-inner").css("position", "relative");
  }

Unfortunately, this fix doesn't seem perfect (the spacing under the post title gets funky when you refresh on mobile when you've already scrolled down a bit) and I'm not totally familiar with your code base (that's why I didn't make a PR).

Comments (4)

  1. Log in to comment