Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • August 7, 2019 at 10:17 pm #1125729
    kristenangel

    Hi there,
    I’ve implemented a sticky sidebar and column on some product pages, but it is jumping when the user scrolls down the page.

    I’d like the scroll to smooth and non-jumpy. This website has a good UX for a sticky element: https://us.hismileteeth.com/products/teeth-whitening-kit

    I believe it is clashing with an existing CSS element… maybe the fixed header? But I can’t figure out exactly where the problem is or how to solve this ‘jumping’ issue.

    Please let me know if you have any ideas.
    Thanks!

    August 10, 2019 at 9:20 pm #1126540
    Mike

    Hey kristenangel,
    Sorry for the late reply, I took a look at the pages and see that the teeth page makes the element sticky by setting the “top” to 200px while the page scrolls.
    Your site sets the “top” to a dynamically changing value that continues to change even after I stop scrolling, for a little bit, and also seems to lag a little bit when I start to scroll.
    So perhaps you can adjust your javascript to a fixed value instead of what it is now.
    Or perhaps you can add the css value “scroll-behavior: smooth;” to your javascript, which may mask the dynamically changing value some, but I’m not sure.
    I hope this helps.

    Best regards,
    Mike

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.