Home › Forums › WoodMart support forum › Product gallery sticky effect!

Product gallery sticky effect!

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 25, 2024 at 12:25 pm #599976

    chnprint
    Participant

    Here’s the situation:
    I’ve set the product images on the left to have a sticky effect, so they stay fixed in the viewport while scrolling. On the right side, I have additional product options with conditional logic. When certain options are hidden, the content on the right becomes shorter. As a result, the product images on the left overlap with the content below.

    Interestingly, when I scroll the page slightly after selecting the options that make the right-hand content shorter, the sticky images return to their correct position and no longer overlap.

    I’ve already set the sticky effect within the parent container, but this issue persists when the content height dynamically changes.

    Could you please assist me with a solution to prevent this overlapping behavior without requiring the user to scroll manually?

    Thank you for your help.

    September 26, 2024 at 2:49 pm #600414

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Apologies for the delayed response and any inconvenience caused.

    Please deactivate all the 3rd party plugins and activate only theme-required plugins on the site and then check the issue. I am sure your issue will be solved. Then Activate the 3rd party plugins one by one and check which plugin is creating the issue for you.

    Otherwise, if the issue still exists then keep the 3rd party plugins deactivated and share the WP admin login details of your site so I will check and give you a possible solution.

    Best Regards

    September 27, 2024 at 1:55 am #600545

    chnprint
    Participant

    “Hi, I just want to confirm that you understand what I mean! I also saw the video I sent!

    I paused all the plugins except the necessary ones, but it didn’t work!

    However, I think it might be caused by not continuing to render the page after the logic switch. I have to manually scroll the window once for it to render.”

    September 28, 2024 at 11:17 am #600945

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    This issue arises because the plugin increases element height dynamically, and by default, it’s impossible to create a universal solution that accounts for every action in the sticky column to recalculate the height of the adjacent column. Therefore, a custom solution is required for each case.

    Try adding the following custom JS code in the On document ready field located in Theme Settings.

    (function($) {
	$('.tc-radio').on('click', function() {
		$(window).scrollTop($(window).scrollTop() + 1).scrollTop($(window).scrollTop() - 1);
	});
})(jQuery);

    Best Regards.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)