Sticky section

  • Hi, this is a great plugin and it works great on my client’s site. I wanted to ask if you could help me make the contents of column 2 sticky. I would like them to stick to the top of the page as it scrolls. I have tried the sticky CSS parameter, but I can’t get it to work.

    Have a look: https://cleaning-express.com/form-test/

    Choose Domestic > Regular Domestic Cleaning and you will see the panel appear on the right-hand side column.

    Any help most appreciated. Thank you!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author WebHolism

    (@webholism)

    Hi @newslines,

    It is a little outside our wheelhouse. We’ll have a look and let you know soon if there is something that seems straightforward to implement, from our perspective at least. Would that be acceptable?

    Many thanks for your time, and using the plugin.

    Kind regards.

    Plugin Author WebHolism

    (@webholism)

    Hi @newslines,

    I have been investigating your problem, and I am not able to get a position: sticky resolution to work based on how nested the page structure is.

    I have had some partial success using JavaScript, but this would require some work further work to be done by you or another developer. You could start by looking at the following:

    const stickyEl = document.querySelector("#field_1_116");
const topOfEl = stickyEl.offsetTop;

function FixEl () {
  if (window.scrollY >= topOfEl) {
    stickyEl.classList.add('fixed-nav');
  } else {
    stickyEl.classList.remove('fixed-nav');
  }
}

window.addEventListener('scroll', FixEl);

    With a basic CSS entry of:

    .fixed-nav {
  position: fixed;
  top: 220px;
}

    Note that this was adapted from the Wes Bos code on https://javascript30.com/ – Lesson 24 – Sticky Nav. So you may want to direct your attention there if you need some JavaScript help (it is a free course). It is worth stating that this is very partial and quite a bit of customisation will be required, especially to ensure that it works on different screen sizes.

    We hope that helps.

    Thread Starter newslines

    (@newslines)

    Thank you. I will check it out.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Sticky section’ is closed to new replies.

Tags