javascript - 框与搜索栏分开

Question

所以我在这个页面工作https://www.pacificotest.com.pe/ .
- 当有人滚动页面时，输入“Clinica”时出现的框
移动不是绝对的，当我将其更改为绝对时，它仍然会继续移动。
- 是否有任何 css、js 或 jquery 代码将两个类或 ID 统一在一起， 所以他们之间的距离并不远？

When you scroll down a little bit

When you scroll top fast

所以我创建的脚本是这样的:

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

Answer 1

新方法

试试这个。使用 CSS 定位正文内容，然后简单地将静态类分配给建议 div。

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

旧答案

下拉列表的对齐似乎是由于顶部深蓝色横幅从页面添加和删除的方式造成的。 site snapshot with top banner

您为更改类而进行的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");
  }
});

我希望这会有所帮助。