Сохраняйте выравнивание по правому краю после перехода в фиксированное положение с помощью прокрутки - PullRequest
Новая
       169

Сохраняйте выравнивание по правому краю после перехода в фиксированное положение с помощью прокрутки

0 голосов
/ 07 августа 2020

У меня есть функция на кнопке раскрывающегося списка, которая при прокрутке мимо нее меняет положение на фиксированное, так что она всегда видна. Хотя моя проблема в том, что он меняется на position: fixed, он обычно выравнивается по правому краю, но меняет положение влево. Как сделать так, чтобы он оставался на месте? Я не могу использовать фиксированное «правильное» значение, так как мне нужно, чтобы оно работало и в мобильной версии (ширина родительского контейнера варьируется). Проверьте мой 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 функция, которая заставляет его залипать при прокрутке.

Ответы [ 2 ]

0 голосов
/ 07 августа 2020

Я решил это с помощью flex. Если кому-то понадобится помощь, вот что я сделал:

Max-width: 1280px; в контейнере, потому что он никогда не становится больше 1280 пикселей. Добавлены display: flex; и justify-content: flex-end;, чтобы дочерний элемент всегда находился в конце родительского элемента, даже в фиксированной позиции. Также добавлены некоторые значения полей и верхних значений, чтобы сделать переход от 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", "");
    }
  });
});
0 голосов
/ 07 августа 2020

необходимо добавить значение right при применении позиции fixed. в способе simalr вы также можете добавить значение top.

Обновление ниже js, а также yo 

if ($(window).scrollTop() > topOfOthDiv2 + 20) {
  drop.css("position", "fixed");
  drop.css("right", "10px");
} else {
  drop.css("position", "relative");
  drop.css("right", "0px");
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...