Поле отделяется от панели поиска - PullRequest
Новая
       6

Поле отделяется от панели поиска

1 голос
/ 18 марта 2020

Так что я работаю на этой странице https://www.pacificotest.com.pe/.
- Когда кто-то прокручивает страницу, поле, которое появляется при вводе «Clinica»
, не является абсолютным, и когда я измените его на абсолютное, оно все равно будет двигаться.
- Есть ли какой-нибудь код css, js или jquery, который объединяет два класса или ID вместе, поэтому они не удаляются друг от друга?

Когда вы немного прокрутите вниз

Когда вы быстро прокрутите вверх

Итак, скрипт, который я создаю, такой: 

<script>
            $(window).scroll(function () {
                if ($(window).scrollTop() >= 1) {
                    $('.autocomplete-suggestions').each(function(i,j) {
                        $(this).addClass('fix-searcher'+(i+1));
                    });
                }
            });

            $(window).scroll(function () {
                if ($(window).scrollTop() >= 15) {
                    $('.aui .fix-searcher1').addClass("fixed");
                    $('.aui .fix-searcher1').removeClass("fix-searcher1");
                    $('.aui .fix-searcher2').addClass("fixed2");
                    $('.aui .fix-searcher2').removeClass("fix-searcher2");  
                } else {
                    $('.aui .fix-searcher1').removeClass("fixed");
                    $('.aui .fix-searcher1').addClass("fix-searcher1");
                    $('.aui .fix-searcher2').removeClass("fixed2");
                    $('.aui .fix-searcher2').addClass("fix-searcher2");
                }
            });
        </script>

CSS: 

.fixed{
position: fixed ! important;
top:100px ! important;
}

.fixed2{
position: absolute ! important;
top:430px ! important;
z-index:100 ! important;
}

div.dropdown-menu.flyover {
margin-top: -1px !important;
}

div.portlet-borderless-container div.portlet-body div.news-card div.text .category {
z-index: 0;
}

.fix-searcher1{
position: fixed ! important;
top:140px ! important;
}

.fix-searcher2{
top:490px ! important;
z-index:100 ! important;
}

.aui .autocomplete-suggestions {
margin-top: 0 ! important;
}

.sub-menu-affix {
    background-size: 12px 180%,12px 180%,0, 0 ! important;
}

1 Ответ

0 голосов
/ 19 марта 2020

Новый подход

Попробуйте вместо этого. Используйте CSS, чтобы расположить содержимое тела, а затем просто назначьте классы stati c для divs предложения. 

// here simply assign a static class and we won't be doing any
// listening on window scroll any longer instead we will use
// css to re-position our content.
$(function() {
  $('.autocomplete-suggestions').each(function(index) {
    $(this).addClass('fix-searcher' + (index + 1));
  });
});
.au .affix-top + #content {
  margin-top: auto;
}

/* here in the browser 60px worked fine for me, you can play around with the number */
.au .affix + #content {
  margin-top: 60px;
}

/* no need for other .fixed and .fixed2 classes */
.fix-searcher1 {
  top: 140px !important;
  z-index: 100 !important;
}

.fix-searcher2 {
  top: 490px !important;
  z-index: 100 !important;
}

Старый ответ

Кажется, что щелчок выпадающего меню вызван тем, как добавляется верхний синий баннер и удалено со страницы снимок сайта с верхним баннером

Проверка scrollTop, которую вы проводите для изменения класса, должна быть эквивалентна высоте этого баннера. Также я бы использовал другое имя класса для добавления идентификатора для поиска div, чтобы стилизация и идентификация div могли оставаться раздельными. Как то так: 

// here if you are using the class just for identification then
// you can add it once on page load and use it for selection later
// which would help avoid any conflict with the style class we will
// use on the suggestion container to position it.
$(function() {
  $('.autocomplete-suggestions').each(function(index) {
    $(this).addClass('js-searcher-' + (index + 1));
  });
});

// here we can change the top offset for the suggestion container
// based on the scrollTop position matching the top emergency banner
// height
$(window).scroll(function() {
  const $searcher1 = $('.aui .js-searcher-1');
  const $searcher2 = $('.aui .js-searcher-2');
  const emergencyBarHeight = 40;
  if ($(window).scrollTop() >= emergencyBarHeight) {
    $searcher1.removeClass("fix-searcher1").addClass("fixed");
    $searcher2.removeClass("fix-searcher2").addClass("fixed2");
  } else {
    $searcher1.removeClass("fixed").addClass("fix-searcher1");
    $searcher2.removeClass("fixed2").addClass("fix-searcher2");
  }
});

Надеюсь, это поможет.

...