使用jquery切换div中的对齐问题

Question

我正在开发一个网页，其中我在页面中显示一个浮动div窗口，这样即使用户滚动页面，div也会出现在页面上。在浮动窗口中，我显示文本，当用户在文本上悬停时，我需要在浮动窗口中显示图像。像联系我们的东西会出现在许多网页上。

下面是代码

＆＃13;

＆＃13;

 jQuery(document).ready(function($) {
   $('#dvSupp').hide();
   //$('#dvFloater').on('click', function(event){
   $('#dvFloat').click(function() {
     $('#dvSupp').toggle('slow');
   });
 });

 function getScrollXY() {
   var scrOfX = 0,
     scrOfY = 0;
   if (typeof(window.pageYOffset) == 'number') {
     //Netscape compliant
     scrOfY = window.pageYOffset;
     scrOfX = window.pageXOffset;
   } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
     //DOM compliant
     scrOfY = document.body.scrollTop;
     scrOfX = document.body.scrollLeft;
   } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
     //IE6 standards compliant mode
     scrOfY = document.documentElement.scrollTop;
     scrOfX = document.documentElement.scrollLeft;
   }
   //return [ scrOfX, scrOfY ];
   return scrOfY;
   // window.alert( 'Horizontal scrolling = ' + scrOfX + '\nVertical scrolling = ' + scrOfY );
 }

 function MovePage() {
     var a = getScrollXY();
     var Y = a + 500;
     var id = document.getElementById("divStayTopLeft");
     id.style.top = Y;
   }
   //Working from here
 var verticalpos = "fromtop"

 if (!document.layers)
   document.write('</div>')

 function JSFX_FloatTopDiv() {
   var startX = 6,
     startY = 200;
   var ns = (navigator.appName.indexOf("Netscape") != -1);
   var d = document;

   function ml(id) {
     var el = d.getElementById ? d.getElementById(id) : d.all ? d.all[id] : d.layers[id];
     if (d.layers)
       el.style = el;
     el.sP = function(x, y) {
       this.style.left = x;
       this.style.top = y;
     };
     el.x = startX;
     if (verticalpos == "fromtop")
       el.y = startY;

     else { //@Author:naturehermit--document.body.scrollTop is no longer valid, we are in doctype mode so use
       //standard DOM component document.documentElement.scrollTop
       el.y = ns ? pageYOffset + innerHeight : document.documentElement.scrollTop + document.documentElement.clientHeight;
       el.y -= startY;
     }
     return el;
   }
   window.stayTopLeft = function() {
     if (verticalpos == "fromtop") {
       var pY = ns ? pageYOffset : document.documentElement.scrollTop;
       ftlObj.y += (pY + startY - ftlObj.y) / 8;
     } else {
       var pY = ns ? pageYOffset + innerHeight : document.documentElement.scrollTop + document.documentElement.clientHeight;
       ftlObj.y += (pY - startY - ftlObj.y) / 8;
     }
     ftlObj.sP(ftlObj.x, ftlObj.y);
     setTimeout("stayTopLeft()", 10);
     setTimeout("MovePage()", 100);
   }
   ftlObj = ml("divStayTopLeft");
   stayTopLeft();
 }
 JSFX_FloatTopDiv();

＆＃13;

.divStayTopLeft {
  POSITION: fixed;
  z-index: 100;
  top: 17em;
  left: 94.5%;
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <section class="content-header">
    <h1>
        Error
        <small>Version 2.0</small>
      </h1>
    <div class="content-wrapper">
      <!-- Content Header (Page header) -->
      <section class="content-header">
        <h1>
        500 Error Page
      </h1>
        <ol class="breadcrumb">
          <li><a href="#"><i class="fa fa-dashboard"></i> Home</a>
          </li>
          <li><a href="#">Examples</a>
          </li>
          <li class="active">500 error</li>
        </ol>
      </section>

      <!-- Main content -->
      <section class="content">

        <div class="error-page">
          <h2 class="headline text-red">500</h2>

          <div class="error-content">
            <h3><i class="fa fa-warning text-red"></i> Oops! Something went wrong.</h3>

            <p>
              We will work on fixing that right away. Meanwhile, you may <a href="../../index.html">return to dashboard</a> or try using the search form.
            </p>

            <form class="search-form">
              <div class="input-group">
                <input type="text" name="search" class="form-control" placeholder="Search">

                <div class="input-group-btn">
                  <button type="submit" name="submit" class="btn btn-danger btn-flat"><i class="fa fa-search"></i>
                  </button>
                </div>
              </div>
              <!-- /.input-group -->
            </form>
          </div>
        </div>
        <!-- /.error-page -->

      </section>
      <!-- /.content -->
    </div>
  </section>
  <div class="divStayTopLeft">
    <div>
      <span id="dvFloat">Hover over this</span>
      <span id="dvSupp" style="display: none; padding-left: -5px">
                        <img src="http://support.webfulfilment.com/images/new_ticket_icon.jpg" alt="Smiley face" height="42" width="42">              </span>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

代码运行正常。当我将鼠标悬停在我的浮动div上时，我可以切换图像。但是我面临着对齐问题。 图像显示在浮动文本下方。我需要将图像显示在浮动文本旁边。

以下是我得到的截图。

所需的一个将是这样的东西

我无法解决这个问题。任何人都可以帮助我在哪里做错了吗？

这是我的codepen link

Answer 1

您的切换元素在展开时需要空间。将左侧位置更改为一小部分，它将完成您想要的任务。

.divStayTopLeft {
  POSITION: fixed;
  z-index: 100;
  top: 17em;
  left: 70%;
  border:1px solid red;
}
<div class="divStayTopLeft">
    <div>
      <span id="dvFloat">Hover over this</span>
      <span id="dvSupp" style="display: none; padding-left: -5px">
                        <img src="http://support.webfulfilment.com/images/new_ticket_icon.jpg" alt="Smiley face" height="42" width="42">              </span>
    </div>
  </div>

jQuery(document).ready(function($) {
   $('#dvSupp').hide();
   //$('#dvFloater').on('click', function(event){
   $('#dvFloat').click(function() {
     $('#dvSupp').toggle('slow');
   });
 });

这是一个工作小提琴：https://jsfiddle.net/pswap30p/

Answer 2

只需在white-space: nowrap; CSS类中添加left: 94.5%;并将right: 10px;更改为.divStayTopLeft即可。

    .divStayTopLeft {
      POSITION: fixed;
      z-index: 100;
      top: 17em;
      right: 10px;
      white-space: nowrap;
    }