Tengo un menú de resaltado de texto de estilo medio, como se muestra a continuación, que funciona cuando resaltas un fragmento de texto en el cuerpo. Conseguí que esto funcionara bien en los primeros tres párrafos. Sin embargo, cuando se desplaza hacia abajo y selecciona el texto, el menú no se muestra en el lugar correcto sino en la parte superior de la página. Agradezca si alguien pudiera ayudar en este asunto.

JSFiddle

enter image description here

Html

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<div id="highlight_menu" style="display:none;"> 
  
  <ul class="social-share">
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
  </ul>
  
  <div class="caret">
  </div>
  
</div>

Jquery

$(function(){
  var menu = $('#highlight_menu');
  
  $(document.body).on('mouseup', function (evt) {
    var s = document.getSelection(),
      r = s.getRangeAt(0);
    if (r && s.toString()) {
      var p = r.getBoundingClientRect();
      if (p.left || p.top) {
        menu.css({
          left: (p.left + (p.width / 2)) - (menu.width() / 2),
          top: (p.top - menu.height() - 10),
          display: 'block',
          opacity: 0
      })
      .animate({
        opacity:1
      }, 300);
      
      setTimeout(function() {
        menu.addClass('highlight_menu_animate');
      }, 10);
      return;
    }
    }
    menu.animate({ opacity:0 }, function () {
      menu.hide().removeClass('highlight_menu_animate');
  });
  });
});
0
Ganidu Ranasinghe 11 oct. 2020 a las 18:32

1 respuesta

La mejor respuesta

GetBoundingClientRect () obtiene valores con respecto a la ventana (solo la parte visible actual de la página), no el documento (página completa). Por lo tanto, también tiene en cuenta el desplazamiento al calcular sus valores.

Actualiza esta línea:

top: ((p.top + window.scrollY) - menu.height() - 10),
1
Raul 11 oct. 2020 a las 16:10