Box is separating from the search bar

Question

So im working in this page https://www.pacificotest.com.pe/.
- When someone scroll the page, the box that appears when you type "Clinica "
move is not absolute, and when I change it to absolute it keep moving anyway.
- Is there any code of css, js or jquery that unify two Classes or ID together, so they dont get far from each other?

When you scroll down a little bit

When you scroll top fast

So the script that i create is this one:

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

Please read this: [https://css-tricks.com/when-using-important-is-the-right-choice/](https://css-tricks.com/when-using-important-is-the-right-choice/) regarding the use of `!important`. Also, there are several places where you have a space between `!` and `important`. You should remove that space if you really want to use all of those. — Rob Moll, Mar 18 '20 at 19:37

Ashish Patel · Answer 1 · 2020-03-19T21:22:02.677

New Approach

Try this instead. Use CSS to position the body content and then simply assign static classes to the suggestion 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;
}

Old Answer

The snapping of the drop-down seems to be causing due to the way top dark-blue banner is getting added and removed from the page. site snapshot with top banner

The scrollTop check that you are conducting to change the class should be equivalent to the height of that banner. Also i would using different class name for adding identifier to search div that way styling and div identification can stay separate. Something like this:

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

I hope this will help.

This code helped me to fix the error that the box cover the search bar on the way up, but it keeps separating when you scroll down. How can I make one class or ID to stop listening to the global scroll event. When i remove the global scroll event, it fix the box. — AlonsoGP, Mar 19 '20 at 17:13
@AlonsoGP did the new approach mentioned in the edited answer work for you? — Ashish Patel, Mar 24 '20 at 15:04

Box is separating from the search bar

1 Answers1

New Approach

Old Answer