<div class="info__item">
  <div class="select__wrap" id="select__department">
    <div class="select__placeholder">сделайте выбор</div>
    <ul class="select__list">
      <li class="select__item select__item--search select__item--loader"><input class="select__input" type="text" placeholder="Поиск"></li>
      <li class="select__item select__item--title select__item--active" data-value="">Выберите страну</li>

      <li class="select__item" data-value="Англия">Англия</li>
      <li class="select__item" data-value="Китай">Китай</li>
      <li class="select__item" data-value="юар">юар</li>
      <li class="select__item" data-value="Россия">Россия</li>
      <li class="select__item" data-value="Украина">Украина</li>
      <li class="select__item" data-value="Беларусь">Беларусь</li>
      <li class="select__item" data-value="Англия">Англия</li>
      <li class="select__item" data-value="Китай">Китай</li>
      <li class="select__item" data-value="Англия">Англия</li>
      <li class="select__item" data-value="Китай">Китай</li>
      <li class="select__item" data-value="Англия">Англия</li>
      <li class="select__item" data-value="Китай">Китай</li>
    </ul>
  </div>
</div>

.select__wrap {
  position: relative;
  width: 100%;
  font-size: 14px;
  box-sizing: border-box;
}

.select__wrap:after {
  position: absolute;
  top: calc(50% - 6px);
  right: 15px;
  content: "";
  width: 8px;
  height: 8px;
  border-left: 1px solid #7e7f8c;
  border-bottom: 1px solid #7e7f8c;
  transform: rotate(-45deg);
  pointer-events: none;
  cursor: pointer;
}

.select__wrap--disabled:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.select__hour,
.select__minute {
  max-width: 85px;
  margin-right: 3px;
  font-size: 24px;
}

.select__day {
  max-width: 200px;
}

.select__placeholder {
  font-size: 14px;
  color: #b6b8cb;
  background-color: #fff;
  padding: 7px 30px 7px 13px;
  line-height: 24px;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}

.select__placeholder.select__item--loader:before {
  right: 40px;
}

.select__list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #fff;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  transition: 0.3s visibility, 0.3s opacity;
}

.select__list--active {
  opacity: 1;
  visibility: visible;
}

.select__item {
  user-select: none;
  font-size: 14px;
  color: #b6b8cb;
  padding: 7px 12px;
  cursor: pointer;
  transition: 0.3s background-color, 0.3s color;
}

.select__item--disabled {
  text-decoration: line-through;
  background-color: #dddddd;
  color: #a3a3a3;
  user-select: none;
}

.select__item--disabled:hover {
  background-color: #dddddd;
  color: #a3a3a3;
}

.select__item--title {
  display: none;
}

.select__item--search {
  padding: 0px;
}

.select__item--search.fix {
  position: sticky;
  top: 0px;
  padding: 4px 0;
}

.select__item--search input {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  padding: 4px 12px;
  padding-left: 20px;
  padding-right: 40px;
  padding-bottom: 5px;
  border-bottom: 1px solid #333;
}

.select__item--loader {
  position: relative;
}

.select__item--loader:before {
  content: "";
  position: absolute;
  top: calc(50% - 10px);
  right: 14px;
  width: 20px;
  height: 20px;
  background-image: url(img/icons/loader.svg);
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: center;
  animation: loader 1s infinite linear;
}

@media screen and (max-width: 840px) {
  .select__item--loader:before {
    top: calc(50% - 8px);
    right: 8px;
    width: 16px;
    height: 16px;
    background-size: 16px;
  }
}

@media screen and (max-width: 480px) {
  .select__day {
    max-width: 250px;
    flex-basis: 100%;
  }
}

@keyframes loader {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(359deg);
  }
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.info__item .select__wrap {
  border: none;
}

.info__item .select__wrap:after {
  right: 20px;
}

.info__item .select__placeholder {
  border: 1px solid #d9dbe9;
  padding-left: 20px;
  padding-right: 20px;
}

.info__item .select__list {
  border: 1px solid #d9dbe9;
  border-top: none;
}

.info__item .select__item:not(.select__item--search) {
  padding-left: 20px;
}

.s {
  height: 300px;
}

$(document).ready(function () {
  var select_obj = {};

  (function () {
    $(".select__wrap").each(function () {
      var id = $(this).attr("id");
      var placeholder = $(this).find(".select__placeholder").html();
      if (placeholder == "") {
        checkActive(this);
        placeholder = $(this).find(".select__placeholder").html();
      }
      select_obj[id] = placeholder;
    });

    $(".select__wrap").on("click", ".select__placeholder", function (e) {
      if ($(e.target).is(".select__disabled")) {
        return false;
      }
      $(".select__list").removeClass("select__list--active");
      $(".select__placeholder").removeClass("changed");
      $(this).next().toggleClass("select__list--active");
      $(this).toggleClass("changed");
    });

    $(".select__wrap").on("click", ".select__item", function (e) {
      if ($(e.target).is(".select__item--disabled")) {
        return false;
      } else {
        if ($(e.target).is(".select__input")) return false;
        var container = $(this).parents(".select__wrap").attr("id");
        if ($("#" + container + " .select__item--active").length == 1) {
          if (!$(this).hasClass("select__item--active")) {
            $("#" + container + " .select__item").removeClass(
              "select__item--active"
            );
            $(this).addClass("select__item--active");
            setPlaceholder(this);
          }
        } else {
          setPlaceholder(this);
          $(this).toggleClass("select__item--active");
        }
        $(this).parent().removeClass("select__list--active");
        $(this)
          .parents(".select__wrap")
          .find(".select__placeholder")
          .removeClass("changed");
        $(this).parents(".select__wrap").trigger("change");
      }
    });

    $("body").on("input", ".select__input", function (e) {
      $(e.target)
        .parent()
        .siblings("li")
        .each((i, el) => {
          $(el).css(
            "display",
            $(el)
              .data("value")
              .toLowerCase()
              .indexOf(e.target.value.toLowerCase()) != -1
              ? "block"
              : "none"
          );
        });
    });

    $("body").on("click", function (e) {
      if (!$(e.target).is(".changed, .select__list, .select__item")) {
        $(".select__list").removeClass("select__list--active");
      }

      if ($(e.target).is(".popup__close, .popup--size")) {
        $(".popup--size").removeClass("popup--active");
      }

      if (!$(e.target).tagName == "SPAN") {
        $(".language-chooser li:not(.active)").hide();
      }
    });

    function setPlaceholder(self) {
      var value = $(self).data("value");
      var value_pl = $(self).html();
      $(self)
        .parents(".select__wrap")
        .find(".select__placeholder")
        .html(value_pl);
    }

    function checkActive(self) {
      var text = $(self).find(".select__item--active").text();
      if (text === undefined || text === "") {
        text = $(self)
          .find(".select__item:not(.select__item--disabled):eq(0)")
          .addClass("select__item--active")
          .text();
      }
      $(self).find(".select__placeholder").html(text);
    }
  })();

  function toggleSelect(id, value) {
    $(id).find(".select__item").removeClass("select__item--active");
    $(id)
      .find('.select__item[data-value="' + value + '"]')
      .addClass("select__item--active");
    $(id).find(".select__placeholder").html(value);
  }

  function getSelValue(id) {
    return $(id).find(".select__item--active").data("value");
  }
});

let scroller = document.querySelector(".select__list");
let fixed = document.querySelector(".select__item--search");

function handler(e) {
  console.log(scroller.scrollTop);
  if (scroller.scrollTop > 0) {
    fixed.classList.add("fix");
  } else if (scroller.scrollTop < 3) {
    fixed.classList.remove("fix");
  }
}

scroller.addEventListener("scroll", handler);