.clone() element on scroll

.clone() element on scroll
0

#1
$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 800) {
    var $button = $('.adsrow').not(".cloned").clone();
    $button.addClass("cloned");
    ($button).insertBefore('.adsrow2');
  } else {

  }
});

Hi, this is the jQuery I use to alternate and clone 2 ads containers (with the ids in the code) in a column set to infinite scroll. But it clones too many ads at once, at every 800 pixel scroll.
I got the following advice from a developer from Google, but I don’t know how to write up the code, since I am a total beginner:

"So every time you scroll past 800px the value of scroll is more than 800, so that if statement will fire, which means you’re going to clone the ads :slight_smile:

Instead you might want to think about something where you – say – divide the scroll value by 800 and round it down, i.e. Math.floor(scroll / 800). Then you keep a track on that value with a global variable and check it as you scroll. So, for example, at scroll of 0, the value would be 0, but as you cross over 800px then value will switch to 1. Since 0 is different to 1 you can use that as a point to clone your elements."

Would someone please write up the JQuery for this and provide explanation?

This is where the code originates from:
jquery-clone-div-multiple-times-on-scroll

And this is the site, the ads column set to infinite scroll is on the index page: Utopist List


#2

Rather than cloning, why not use CSS to keep the ad banners floating in that position as the user scrolls down?


#3

That’s what I did before. I’ve set the element containing the ads sticky with javascript, then I used flexbox and I’ve set it to space-between. But it was impossible to create a nice, edge to edge ads column for every screen resolution. There were large gaps in between the ads or at the bottom, at higher resolutions. And using media queries to insert additional ad blocks at higher resolutions wouldn’t work either because the actual height of the ads will vary, and many of them will be tower shaped ads, so there is no way for a media query rule to justify the layout by inserting extra clones or extra ads. I realized it’s much more practical just to auto-clone the ads element, on scroll. But if you can solve the css limitations mentioned above, feel free to create a demo. :wink:


#4

So every time you scroll past 800px the value of scroll is more than 800, so that if statement will fire, which means you’re going to clone the ads

What he meant to say is as long as the user had scrolled past 800px, your function will execute over and over. A quick solution would be to use an equals-to operator in your if statement, so you would change this line:

if (scroll >= 800) {

To this:

if (scroll == 800) {


#5

Hi, I have just set it, but it doesn’t clone anything. Can you debug this?
And can I use debounce or throttle to fix this? Rather debounce. But debounce is also time triggered, i need something what triggers by the pixel count. >= works, but == doesn’t. Is there any other variation?


#6

I have changed the code now into:

$(window).scroll(function() {
  var documentHeight = $(document).height();
  var scroll = $(window).scrollTop();
  var visibleHeight = document.documentElement.clientHeight;
  if (documentHeight - scroll - visibleHeight < 1) {
    var $button = $('.adsrow').first().clone();
    $('.adsrow2').append($button);
  }
});

But the bugs are obvious. Further suggestions much appreciated.