Элементы списка в раскрывающемся подменю не отображаются правильно - PullRequest
Новая
       79

Элементы списка в раскрывающемся подменю не отображаются правильно

0 голосов
/ 25 сентября 2019

У меня есть раскрывающееся меню начальной загрузки с некоторыми элементами списка, которые имеют подменю.Обычно мои элементы выглядят так: COrrect

Однако, когда я прокручиваю страницу вниз и поднимаюсь вверх, чтобы снова открыть меню, это выглядит так: Wrong

Странная часть заключается в том, что с помощью Chrome Inspector, когда я выбираю один из исчезнувших элементов, он появляется следующим образом: enter image description here

если предмет находится там, где он должен быть, но не отображается там.Это происходит для всех элементов.

Ссылка на Codepen: https://codepen.io/boto_style/pen/XWrGboz Мне пришлось вставить весь код, поскольку я не мог воспроизвести проблему без него, поэтому я не размещаю его здесь.

Попробуйте навести курсор на пункты меню один раз при загрузке, а затем сделайте это снова, прокрутив немного страницу вниз. 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Я не мог опубликовать вопрос без фрагмента кода, поэтому я создал его просто для того, чтобы быть там.

РЕДАКТИРОВАТЬ :Итак, я обнаружил фрагмент кода, который создает: 

$(document).ready(function(){
  if (jQuery(window).width() > 768) {

    function isScrolledIntoView(elem)
    {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();
        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }

    $(function(){
        var lastScrollTop = 0, delta = 5;
        $(window).scroll(function(event){
           var st = $(this).scrollTop();

           if(Math.abs(lastScrollTop - st) <= delta)
              return;

           if (st > lastScrollTop){
               // downscroll code
               console.log('scroll down');
               var $elem = $('#sticky');
               $elem.css({
                   position: 'absolute',
                   top: $elem.position().top,
                   left: 15
               });
               if(isScrolledIntoView($('.facebook_feed'))) {
                    //$('#sticky').addClass('stick_to_bottom');
                    var $elem = $('#sticky');

                    $elem.css({
                        position:   'sticky',
                        top: -900,
                        left: 0
                        //left:       $elem[0].getBoundingClientRect().left
                    });
                }

           } else {
              // upscroll code
              console.log('scroll up');
              var $elem = $('#sticky');
              $elem.css({
                  position: 'absolute',
                  top: $elem.position().top,
                  left: 15
              });
              if(isScrolledIntoView($('.flow h1')))
               {
                   //$('#sticky').addClass('stick_to_bottom');
                   var $elem = $('#sticky');

                   $elem.css({
                       position: 'sticky',
                       top: 0,
                       left: 0
                       //left:       $elem[0].getBoundingClientRect().left
                   });
               }
           }
           lastScrollTop = st;
        });
    });


  }
});

И, в частности, эту часть: 

if(isScrolledIntoView($('.flow h1')))
               {
                   //$('#sticky').addClass('stick_to_bottom');
                   var $elem = $('#sticky');

                   $elem.css({
                       position: 'sticky',
                       top: 0,
                       left: 0
                       //left:       $elem[0].getBoundingClientRect().left
                   });
               }

Это используется для боковой панели, так что она остается липкой, но в другой частиэто зависит от направления прокрутки, как показано в ссылке Codepen.

...