title: Keep right-alignment after changing to fixed-position by scroll
body: <p>I've got a function on a drop-down button which when scrolled past it, it changes position to fixed so that it's always visible. Although, my problem is when it changes to position:fixed, it's usually aligned to the right, but it changes position to the left. How can I make it so that it stays in place? I can't use any fixed &quot;right&quot; value, as I need this to work on mobile version as well(width of parent container varies). Check my jsFiddle <a href="https://jsfiddle.net/ramisrour/2asco9n1/6/" rel="nofollow noreferrer">https://jsfiddle.net/ramisrour/2asco9n1/6/</a></p>
  <p>Also, the .dropContainer doesn't need height or width, I just set it there for the fiddle, so you can test with the scrolling.</p>
  <pre><code>&lt;div class=&quot;dropContainer&quot;&gt;
    &lt;div class=&quot;dropDwn&quot;&gt;
      &lt;div class=&quot;dropToggle&quot;&gt;Viktig informasjon! Les her&amp;ensp;&lt;i class=&quot;bouncer&quot;&gt;&lt;/i&gt;&lt;/div&gt;
      &lt;div class=&quot;dropContentBox&quot;&gt;
      &lt;div class=&quot;dropTxt&quot;&gt;
          Vær oppmerksom på at Huawei P40-serien og Mate Xs ikke har Google Mobile Services (GMS) installert (Du kan derfor ikke laste ned apper direkte fra Google Play Butikken). Istedenfor har den AppGallery, Huaweis egen offisielle appbutikk. 
          &lt;/br&gt;Du kan bruke AppGallery til å lete etter, laste ned, håndtere og dele mobilapper.
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;acceptCta&quot;&gt;&lt;span class=&quot;acceptCtaTxt&quot;&gt;Jeg har lest og forstått&amp;ensp;&lt;/span&gt;&lt;i class=&quot;arroww&quot;&gt;&lt;/i&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <pre><code>.dropContainer{
    position: relative;
    box-sizing: border-box;
  }
  
  .dropDwn {
    font-family: inherit;
    background-color: #fff;
    color: #333;
    border: solid 1px #333;
    position: relative;
    text-align: center;
    display: block;
    z-index: 9999;
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
    transition: all 0.5s ease;
    font-size: 16px;
    width: 250px;
    box-sizing: border-box;
    height: 30px;
    overflow: hidden;
    float: right;
  }
  
  
  .dropDwn.open {
    height: 280px;
    width: 320px;
    cursor: default;
    background-color: #000E52;
    color: #fff;
  }
  
  .dropTxt{
    margin: 10px;
  }
  
  .bouncer {
    position: relative;
    border: solid #333;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transition: all 0.5s ease;
    animation: bouncer 2s infinite;
  }
  
  .dropDwn.open .bouncer {
    transform: rotate(225deg);
    border-color: #fff;
  }
  
  .dropContentBox {
    margin-top: 10px;
    display: inline-block;
    color: #fff;
    transition: all 0.5s ease;
    text-align: center;
  }
  
  .acceptCta {
    display: block;
    position: relative;
    cursor: pointer;
    text-align: center;
    margin: 0 auto;
    background-color: #7CBD2B;
    color: #333;
    height: 35px;
    width: 220px;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 25px;
    box-sizing: border-box;
    border-radius: 3px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
    transition: all 0.5s ease;
    z-index: 10;
  }
  
  .acceptCta:hover {
    background-color: #88D41B;
    padding: 9px 24px;
  }
  
  .acceptCtaTxt {
    display: inline-block;
    float: left;
    vertical-align: middle;
    position: relative;
  }
  
  .arroww {
    border: solid #333;
    border-width: 0 3px 3px 0;
    display: inline-block;
    box-sizing: border-box;
    padding: 3px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transition: all 0.5s ease;
  }
  
  .acceptCta:hover .arroww {
    /*padding: 6px 2px;
    transform: rotate(-315deg);*/
  }
  
  @keyframes bouncer {
    0% {
      bottom: 0px;
    }
  
    20% {
      bottom: 7px;
    }
  
    40% {
      bottom: 0px;
    }
  
    60% {
      bottom: 7px;
    }
  
    80% {
      bottom: 0px;
    }
  
    100% {
      bottom: 0px;
    }
  }
  </code></pre>
  <pre><code>// Open/close
  $(document).ready(function() {
    $('.dropToggle').click(function() {
      $(this).parent().addClass(&quot;open&quot;);
    });
    setTimeout(function() {
      $('.acceptCta').click(function() {
        //This needed
        var $this = $(this);
        var $container = $('.dropDwn');
        var $arrow = $('.arroww');
  
        $arrow.css(&quot;transform&quot;, &quot;rotate(-315deg)&quot;);
        $arrow.css(&quot;padding&quot;, &quot;6px 2px&quot;);
        setTimeout(function() {
          $this.parent().removeClass(&quot;open&quot;);
        }, 600);
        setTimeout(function() {
          $container.css(&quot;opacity&quot;, &quot;0&quot;);
          $container.css(&quot;right&quot;, &quot;-1000px&quot;);
        }, 1100);
        setTimeout(function() {
          $container.css(&quot;display&quot;, &quot;none&quot;);
        }, 1600);
      });
    })
  });
  
  // Hide if src image is in viewport, otherwise show
  $(document).ready(function() {
    var topOfOthDiv = $(&quot;[alt='Guide for installasjon av apper']&quot;).offset().top;
    $(window).scroll(function() {
      if ($(window).scrollTop() &gt; topOfOthDiv + 200) {
        $(&quot;.dropDwn&quot;).css(&quot;right&quot;, &quot;-1000px&quot;);
        $(&quot;.dropDwn&quot;).css(&quot;opacity&quot;, &quot;0&quot;);
      } else {
  
        $(&quot;.dropDwn&quot;).css(&quot;opacity&quot;, &quot;1&quot;);
      }
    });
  });
  
  // Stick button when scrolling past it
  $(document).ready(function() {
    var topOfOthDiv2 = $('.dropDwn').offset().top;
    var drop = $('.dropDwn');
    $(window).scroll(function() {
      if ($(window).scrollTop() &gt; topOfOthDiv2 + 20) {
        drop.css(&quot;position&quot;, &quot;fixed&quot;);
      } else {
        drop.css(&quot;position&quot;, &quot;relative&quot;);
      }
    });
  });
  </code></pre>
  <p>It's the bottom jQuery function which makes it stick by scrolling.</p>