Keep right-alignment after changing to fixed-position by scroll

Question

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 "right" value, as I need this to work on mobile version as well(width of parent container varies). Check my jsFiddle https://jsfiddle.net/ramisrour/2asco9n1/6/

Also, the.dropContainer doesn't need height or width, I just set it there for the fiddle, so you can test with the scrolling.

<div class="dropContainer">
  <div class="dropDwn">
    <div class="dropToggle">Viktig informasjon! Les her&ensp;<i class="bouncer"></i></div>
    <div class="dropContentBox">
    <div class="dropTxt">
        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. 
        </br>Du kan bruke AppGallery til å lete etter, laste ned, håndtere og dele mobilapper.
      </div>
    </div>
    <div class="acceptCta"><span class="acceptCtaTxt">Jeg har lest og forstått&ensp;</span><i class="arroww"></i></div>
  </div>
</div>

.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;
  }
}

// Open/close
$(document).ready(function() {
  $('.dropToggle').click(function() {
    $(this).parent().addClass("open");
  });
  setTimeout(function() {
    $('.acceptCta').click(function() {
      //This needed
      var $this = $(this);
      var $container = $('.dropDwn');
      var $arrow = $('.arroww');

      $arrow.css("transform", "rotate(-315deg)");
      $arrow.css("padding", "6px 2px");
      setTimeout(function() {
        $this.parent().removeClass("open");
      }, 600);
      setTimeout(function() {
        $container.css("opacity", "0");
        $container.css("right", "-1000px");
      }, 1100);
      setTimeout(function() {
        $container.css("display", "none");
      }, 1600);
    });
  })
});

// Hide if src image is in viewport, otherwise show
$(document).ready(function() {
  var topOfOthDiv = $("[alt='Guide for installasjon av apper']").offset().top;
  $(window).scroll(function() {
    if ($(window).scrollTop() > topOfOthDiv + 200) {
      $(".dropDwn").css("right", "-1000px");
      $(".dropDwn").css("opacity", "0");
    } else {

      $(".dropDwn").css("opacity", "1");
    }
  });
});

// Stick button when scrolling past it
$(document).ready(function() {
  var topOfOthDiv2 = $('.dropDwn').offset().top;
  var drop = $('.dropDwn');
  $(window).scroll(function() {
    if ($(window).scrollTop() > topOfOthDiv2 + 20) {
      drop.css("position", "fixed");
    } else {
      drop.css("position", "relative");
    }
  });
});

It's the bottom jQuery function which makes it stick by scrolling.

Answer 1

you have to add right value when you apply fixed position. in simalr way you can add top value too.

Update below js and also the yo

if ($(window).scrollTop() > topOfOthDiv2 + 20) {
  drop.css("position", "fixed");
  drop.css("right", "10px");
} else {
  drop.css("position", "relative");
  drop.css("right", "0px");
}

Answer 2

I solved this by using flex. In case anybody needs help with this here's what I did:

Max-width: 1280px; on the container, because it never gets bigger than 1280px. Added display: flex; and justify-content: flex-end; so the child element would always sit at the end of the parent element, even in fixed position. Also added some margin and top values to make the transition from absolute to fixed more smoothly, but that might differ for you as this suited my situation.

.dropContainer{
  display: flex;
  max-width: 1280px;
  justify-content: flex-end;
  position: relative;
  box-sizing: border-box;
}

.dropDwn {
  font-family: inherit;
  background-color: #fff;
  color: #333;
  border: solid 1px #333;
  position: absolute;
  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;
  margin-right: 10px;
}

// Hide if src image is in viewport, show if not
$(document).ready(function() {
  var topOfOthDiv2 = $('.dropDwn').offset().top;
  var drop = $('.dropDwn');
  var cont = $('.dropContainer');
  $(window).scroll(function() {
    if ($(window).scrollTop() > topOfOthDiv2 - 10) {
      drop.css("position", "fixed");
      drop.css("top", "10px");
    } else {
      drop.css("position", "absolute");
      drop.css("top", "");
    }
  });
});