Блог

Главная - Вопросы по программированию - Меню со свойством sticky CSS выводит всплывающее окно из положения со смещением X Y

Меню со свойством sticky CSS выводит всплывающее окно из положения со смещением X Y

#html #css

Вопрос:

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

Всплывающая панель инструментов должна появиться рядом с указателем курсора, hower:

  1. С конфигурацией CSS sticky это НЕ работает — она смещена более чем на 100 пикселей как в X, так и в Y и получает большее/меньшее смещение при разных коэффициентах масштабирования страницы.
  2. Когда я удаляю липкую конфигурацию (позиция:липкая, вверху:0), она работает и появляется прямо под указателем курсора

Почему это происходит? Как я могу сохранить панель инструментов липкого меню и заставить ее работать по назначению?

Код ниже:

 <head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<style>

 /* EDITOR */
.qr_editor {
  max-width: 100%;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
  margin: 2rem;
}

/* TOOLBAR */
.qr_editor .toolbar {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  background-color: white;
  z-index:10;
  
  /*when this sticky part is removed, the pop-up toolbar pops up in the right place*/
  position: sticky;
  top: 0;
}

</style>
<div id="position"></div>
<br>
<div class="container">
    <div class="qr_editor">
        <div class="toolbar sticky">
            <div class="line">
                <span class="box">
                    <span>Example Sticky Tool Bar Goes Here</span>                      
                </span>
                <div class="box" id="popup_toolbar" style="display:none;background-color:white;border:solid black;">
                        Sample Image Tools Popup Box
                </div>   
          </div>
        </div>
        <div class="content-area">
            <div contenteditable="true">
                <div>Sample Text</div>
                <img class="qr_editor_img"  src="http://www.google.com.br/images/srpr/logo3w.png" style="width:100%;cursor:pointer">
            </div>
        </div>      
    </div>
</div>
<script>
$(document).ready(function(){
    //to display coordinates
    $( document ).on( "mousemove", function( event ) {
        $( "#position" ).text( "pageX: "   event.pageX   ", pageY: "   event.pageY );
    });

    //pops up toolbar for image manipulation
    var img_src = '';
    $(document).on("click", "img", function(e) {   
        console.log(e.pageX);
        console.log(e.pageY);
        //position the popup toolbar where the mouse click is
        e.preventDefault();
        $('#popup_toolbar').css( 'position', 'absolute' );
        $('#popup_toolbar').css( 'top', e.pageY );
        $('#popup_toolbar').css( 'left', e.pageX );
        $('#popup_toolbar').show();
    }); 
});
</script>
</body>

Комментарии:

1. Я думаю, что вам не хватает «Элемента с положением: абсолютным; расположен относительно ближайшего расположенного предка (вместо расположения относительно окна просмотра, как фиксированный)». так что это относительно родителя. Вы хотите изменить $(‘#popup_toolbar’).css («позиция», «абсолютная»); на $(‘#popup_toolbar’).css( «позиция», «исправлено»);

2. попробовал, и это работает ^

3. Да, это сработало!!!! Большое спасибо!

4. Последующая проблема — если я добавлю текст над изображением, чтобы он был достаточно длинным для прокрутки, а затем щелкните изображение, панель инструментов правильно отобразится при наведении курсора. Прокрутите страницу, нажмите еще раз, панель инструментов теперь смещена НЕ по курсору… есть какие-нибудь предложения?

Ответ №1:

попробуйте это:

 <head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<style>

 /* EDITOR */
.qr_editor {
  max-width: 100%;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
  margin: 2rem;
}

/* TOOLBAR */
.qr_editor .toolbar {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  background-color: white;
  z-index:10;
  
  /*when this sticky part is removed, the pop-up toolbar pops up in the right place*/
  position: sticky;
  top: 0;
}

#popup_toolbar {
  position: fixed;
}

</style>
<div id="position"></div>
<br>
<div class="container">
    <div class="qr_editor">
        <div class="toolbar sticky">
            <div class="line">
                <span class="box">
                    <span>Example Sticky Tool Bar Goes Here</span>                      
                </span>
                <div class="box" id="popup_toolbar" style="display:none;background-color:white;border:solid black;">
                        Sample Image Tools Popup Box
                </div>   
          </div>
        </div>
        <div class="content-area">
            <div contenteditable="true">
                <div>Sample Text</div>
                <img class="qr_editor_img"  src="http://www.google.com.br/images/srpr/logo3w.png" style="width:100%;cursor:pointer">
            </div>
        </div>      
    </div>
</div>
<script>
$(document).ready(function(){
    //to display coordinates
    $( document ).on( "mousemove", function( event ) {
        $( "#position" ).text( "pageX: "   event.pageX   ", pageY: "   event.pageY );
    });

    //pops up toolbar for image manipulation
    var img_src = '';
    $(document).on("click", "img", function(e) {   
        console.log(e.pageX);
        console.log(e.pageY);
        //position the popup toolbar where the mouse click is
        e.preventDefault();
        $('#popup_toolbar').css( 'top', e.pageY );
        $('#popup_toolbar').css( 'left', e.pageX );
        $('#popup_toolbar').show();
    }); 
});
</script>
</body>
Метки: