通过滚动更改为固定位置后保持右对齐

Question

我在一个下拉按钮上有一个 function ，当滚动它时，它会将 position 更改为固定，以便它始终可见。 虽然，我的问题是当它更改为 position:fixed 时，它通常向右对齐，但它会将 position 更改为左侧。 我怎样才能使它保持原位？ 我不能使用任何固定的“正确”值，因为我也需要它在移动版本上工作（父容器的宽度不同）。 检查我的 jsFiddle https://jsfiddle.net/ramisrour/2asco9n1/6/

此外，.dropContainer 不需要高度或宽度，我只是将它设置为小提琴，因此您可以使用滚动进行测试。

<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");
    }
  });
});

它是底部 jQuery function 通过滚动使其粘住。

Answer 1

当您应用fixed的 position 时，您必须添加right值。 以同样的方式，您也可以增加top价值。

更新下面的js和哟

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

Answer 2

我通过使用 flex 解决了这个问题。 如果有人需要帮助，这就是我所做的：

Max-width: 1280px; 在容器上，因为它永远不会大于 1280px。 添加了display: flex; 和justify-content: flex-end; 因此子元素将始终位于父元素的末尾，即使在固定的 position 中也是如此。 还添加了一些边距和顶部值，以使从absolute到fixed的过渡更加顺畅，但这可能对您有所不同，因为这适合我的情况。

.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", "");
    }
  });
});