Reply To: Styling adjustments…

#10307

Ernest Marcinko
Keymaster

This is only solveable by javascript only, as CSS cannot detect the scrolling.

I would try this script something like this:

jQuery(function($) {
  $(window).scroll(function(){
    if ($(this).scrollTop() > 10) {
      $('#ajaxsearchprores1_1').addClass('scrolled_top');
    } else {
      $('#ajaxsearchprores1_1').removeClass('scrolled_top');
    }
  });
});

This will check the scroll position and add a class called “scrolled_top” to the result element if the scroll is greater than 10.

Then instead of the previous CSS, use these two:

div.ajaxsearchpro[id*=ajaxsearchprores1_].vertical {
    position: fixed !important;
    top: 120px !important;
}

div.ajaxsearchpro[id*=ajaxsearchprores1_].vertical.scrolled_top {
    position: fixed !important;
    top: 90px !important;
}

The script will swap the scrolled_top class on/off, and in CSS the top is specified differently for each class.

Best,
Ernest Marcinko

If you like my products, don't forget to rate them on codecanyon :)