title: Refresh sticky mobile leaderboard ad slot by changing the content URL in infinite scroll
body: <p>I want to refresh sticky mobile leaderboard slot when the URL changes in infinite scroll. What do you think is the best way to go? Please let me know if you have any suggestions.</p>
  
  <pre><code>class DFPAds {
    constructor() {
      this.slots = [];
      this.onScroll = throttle(this.loopAds, 300);
      this.addEvents();
  
      this.createAdObject = this.createAdObject.bind(this);
      this.createSlotForAd = this.createSlotForAd.bind(this);
      this.displayAd = this.displayAd.bind(this);
    }
  
    static get() {
      return DFPAds._instance;
    }
  
    static set() {
      if (!DFPAds._instance) {
        DFPAds._instance = new DFPAds();
        return DFPAds._instance;
      } else {
        throw new Error("DFPAds: instance already initialized");
      }
    }
  
    addEvents() {
      window.addEventListener("scroll", e =&gt; this.onScroll());
    }
  
    loopAds() {
      this.slots.map(slot =&gt; this.displayAd(slot));
    }
  
    createAdObject(ad) {     
      let id = ad.id;
      let attributes = getDataSet(ad);    
      let sizes = JSON.parse(attributes.sizes);
      let sizeMapping;
  
      if (attributes.sizemapping) {
        attributes.sizemapping.length
          ? (sizeMapping = JSON.parse(attributes.sizemapping))
          : (sizeMapping = null);
      }
  
      attributes.id = id;
      attributes.sizes = sizes;
      attributes.sizemapping = sizeMapping;
  
      return attributes;
    }
  
  
    createSlotForAd(adObject) {
      let {
        id,
        adtype,
        position,
        slotname,
        sizes,
        sizemapping,
        shouldlazyload,
        pagenumber,
        pageid
      } = adObject;
  
      googletag.cmd.push(() =&gt; {
        let slot = googletag.defineSlot(slotname, sizes, id);
  
        if(position){
          slot.setTargeting("position", position);
        }
        if(pagenumber){
          slot.setTargeting("pagenumber", pagenumber);
        }
  
        if(pageid){
          slot.setTargeting("PageID", pageid)   
        }
  
        if (sizemapping) {
          let mapping = googletag.sizeMapping();
  
          sizemapping.map(size =&gt; {
            mapping.addSize(size[0], size[1])
          });
  
          slot.defineSizeMapping(mapping.build());
        }
  
        slot.addService(googletag.pubads());
        googletag.display(id);
  
        shouldlazyload
          ? this.slots.push({ slot: slot, id: id })
          : googletag.pubads().refresh([slot]);
          console.log("SlotTop", slot)
      });
    }
  
    displayAd(slot) {
      console.log("Slottwo", slot)
      let item = document.getElementById(slot.id);
      if (item) {
        let parent = item.parentElement;
        let index = this.slots.indexOf(slot);
        let parentDimensions = parent.getBoundingClientRect();
  
        if (
          (parentDimensions.top - 300) &lt; window.innerHeight &amp;&amp;
          parentDimensions.top + 150 &gt; 0 &amp;&amp;
          parent.offsetParent != null
        ) {
          googletag.cmd.push(function() {
            googletag.pubads().refresh([slot.slot]);
          });
          this.slots.splice(index, 1);
        }
      }
    }
  
  
    setUpAdSlots(context = document) {
      let ads = [].slice.call(context.getElementsByClassName("Ad-data"));
      if (ads.length) {
        ads.map(ad =&gt; compose(this.createSlotForAd, this.createAdObject)(ad));
      }
    }
  }
  
  export default DFPAds;
  </code></pre>
  
  <p><strong>And this is my Infinite Scroll code:</strong></p>
  
  <pre><code>export default class InfiniteScroll {
      constructor() {
          this._end = document.getElementById('InfiniteScroll-End');
          this._container = document.getElementById('InfiniteScroll-Container');
              if(!this._end || !this._container)
                  return;
  
          this._articles = { };
          this._triggeredArticles = [];
          this._currentArticle = '';
          this._apiUrl = '';
          this._count = 1;
          this._timedOut = false;
          this._loading = false;
          this._ended = false;
          this._viewedParameter = "&amp;alreadyViewedContentIds=";
          this._articleSelector = "InfiniteScroll-Article-";
          this._articleClass = "Article-Container";
  
          this.setStartData();
          this.onScroll = throttle(this.eventScroll, 200);
          this.addEvents();
      }
  
      addEvents(){
          setTimeout(()=&gt;{
              window.addEventListener('scroll', (e) =&gt; this.onScroll() );
          }, 2000);
      }
  
      addToStore(article){
          this._articles["a" + article.id] = article;
      }
  
      addToTriggeredArticles(id){
          this._triggeredArticles.push(id);
      }
  
      getRequestUrl(){
          return this._apiUrl + this._viewedParameter + Object.keys(this._articles).map(key =&gt; this._articles[key].id).join();
      }
  
      getLastArticle(){
          return this._articles[Object.keys(this._articles)[Object.keys(this._articles).length-1]];
      }
  
      setStartData() {
          let dataset = getDataSet(this._container);
          if(dataset.hasOwnProperty('apiurl')){
              let article = Article.get();
              if(article){
                  this._apiUrl = dataset.apiurl;
                  this._currentArticle = "a" + article.id;
  
                  this.addToStore(article);
              }else{
                  throw(new Error('Infinite Scroll: Article not initialized.'));
              }
          }else{
              throw(new Error('Infinite Scroll: Start object missing "apiurl" property.'));
          }
      }
  
      eventScroll() {
              if(this.isApproachingNext()){
                  this.requestNextArticle();
              }
  
              if(!this.isMainArticle(this._articles[this._currentArticle].node)){
                  this.updateCurrentArticle();
              }
      }
  
      eventRequestSuccess(data){
          this._loading = false;
          if(data != ''){
              if(data.hasOwnProperty('Id') &amp;&amp; data.hasOwnProperty('Html') &amp;&amp; data.hasOwnProperty('Url')){
                  this.incrementCount();
                  let node = document.createElement('div');
                  node.id = this._articleSelector + data.Id;
                  node.innerHTML = data.Html;
                  node.className = this._articleClass;
                  this._container.appendChild(node);
  
                  this.initArticleUpNext({
                      img: data.Img, 
                      title: data.ArticleTitle, 
                      category: data.Category, 
                      target: node.id 
                  });
  
                  this.addToStore(
                      new Article({
                          id: data.Id, 
                          node: node, 
                          url: data.Url, 
                          title: data.Title, 
                          count: this._count,
                          nielsenProps: {
                              section: data.NeilsenSection,
                              sega: data.NeilsenSegmentA,
                              segb: data.NeilsenSegmentB,
                              segc: data.NeilsenSegmentC
                          }
                      })
                  );
              }else{
                  this._ended = true;
                  throw(new Error('Infinite Scroll: Response does not have an ID, Url and HTML property'));
              }
          }else{
              this._ended = true;
              throw(new Error('Infinite Scroll: No new article was received.'));
          }
      }
  
      eventRequestError(response){
          this._loading = false;
          this._ended = true;
          throw(new Error("Infinite Scroll: New article request failed."));
      }
  
      requestNextArticle(){
          if(!this._loading){
              this._loading = true;
              return API.requestJSON(this.getRequestUrl())
                  .then(
                      (response)=&gt;{this.eventRequestSuccess(response)},
                      (response)=&gt;{this.eventRequestError(response)}
                  );
          }
      }
  
  
      triggerViewEvent(article){
          if(article.count &gt; 1 &amp;&amp; !this.isAlreadyTriggeredArticle(article.id)){
              this.addToTriggeredArticles(article.id);
              Tracker.pushView(article.url, article.count);
  
              if(isFeatureEnabled('Nielsen') &amp;&amp; Nielsen.get()){
                  Nielsen.get().eventInfiniteScroll({
                      id: article.id,
                      url: article.url,
                      section: article.nielsenProps.section,
                      sega: article.nielsenProps.sega,
                      segb: article.nielsenProps.segb,
                      segc: article.nielsenProps.segc
                  });
                  NielsenV60.trackEvent(article.title);
              }
          }
      }
  
      updateCurrentArticle(){
          Object.keys(this._articles).map( key =&gt; {
              if(this._currentArticle !== key &amp;&amp; this.isMainArticle(this._articles[key].node)){
                  this._currentArticle = key;
                  this.updateUrl(this._articles[key]);
                  this.triggerViewEvent(this._articles[key]);
              }
          }); 
      }
  
      updateUrl(article){
          try{
              if(history.replaceState){
                  if(window.location.pathname !== article.url){
                      history.replaceState('', article.title, article.url);
                  }
              }
          }catch(e){}
      }
  
      incrementCount(){
          this._count = this._count + 1;
      }
  
      initArticleUpNext(data){
          this.getLastArticle().initUpNext(data);
      }
  
      isApproachingNext(){
          return window.pageYOffset  &gt; this._end.offsetTop - (window.innerHeight * 2) &amp;&amp; !this._ended &amp;&amp; this._end.offsetTop &gt;= 100;
      }
  
      isMainArticle(node){
          if(node.getBoundingClientRect){
              return (node.getBoundingClientRect().top &lt; 80 &amp;&amp; node.getBoundingClientRect().bottom &gt; 70);
          }else{
              return false;
          }
      }
  
      isAlreadyTriggeredArticle(id){
          return this._triggeredArticles.indexOf(id) &gt; -1;
      }
  
  
  }
  </code></pre>