问题描述
我创建了一个 contenteditable div，它有一个粘性菜单工具栏（如果滚动到达页面顶部，则粘在浏览器顶部）和一个包含文本和图像的内容区域。点击图片会弹出一个工具箱，允许进行图片处理。
弹出工具箱应该出现在光标指针旁边，但是：
- 使用 CSS 粘性配置时，它不起作用 - 它在 X 和 Y 方向偏移超过 100 个像素，并且在不同的页面缩放系数下偏移更多/更少。
- 当我删除粘性配置（位置：粘性，顶部：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.3);
margin: 2rem;
}
/* TOOLBAR */
.qr_editor .toolbar {
Box-shadow: 0 1px 4px rgba(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>
解决方法
试试这个：
<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.3);
margin: 2rem;
}
/* TOOLBAR */
.qr_editor .toolbar {
box-shadow: 0 1px 4px rgba(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>