javascript - 带有工具提示的 id base anchor 滚动链接

Question

我正在尝试显示带有 id base anchor 滚动链接的工具提示，工具提示将一直处于事件状态，直到激活 id div，之后它将显示下一个相关链接工具提示

但对我来说它在滚动时不显示，我正在使用工具提示和自定义代码用于堆栈溢出帖子中的 anchor 滚动链接

例如。 http://us.blackberry.com/smartphones/blackberry-passport/overview.html

这是我的代码

jQuery(document).ready(function($) {
  $(".scroll").click(function(event) {
    event.preventDefault();
    $('html,body').animate( { scrollTop:$(this.hash).offset().top } , 1000);
  });
});

/**
* This part handles the highlighting functionality.
* We use the scroll functionality again, some array creation and 
* manipulation, class adding and class removing, and conditional testing
*/

var aChildren = $(".dotservices li").children(); // find the a children of the list items
var aArray = []; // create the empty aArray
for (var i=0; i < aChildren.length; i++) {    
  var aChild = aChildren[i];
  var ahref = $(aChild).attr('href');
  aArray.push(ahref);
} // this for loop fills the aArray with attribute href values

$(window).scroll(function(){
  var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
  var windowHeight = $(window).height(); // get the height of the window
  var docHeight = $(document).height();

  for (var i=0; i < aArray.length; i++) {
    var theID = aArray[i];
    var divPos = $(theID).offset().top; // get the offset of the div from the top of page
    var divHeight = $(theID).height(); // get the height of the div in question
    if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
      $("a[href='" + theID + "']").addClass("nav-active popactive");

      $('.poptip').tooltipster({
        position:'right'
      });
      $('.popactive').tooltipster('show');	
    } else {
      $("a[href='" + theID + "']").removeClass("nav-active popactive");
      $('.popactive').tooltipster('hide');
    }
  }

  if(windowPos + windowHeight == docHeight) {
    if (!$(".dotservices li:last-child a").hasClass("nav-active")) {
      var navActiveCurrent = $(".nav-active").attr("href");
      $("a[href='" + navActiveCurrent + "']").removeClass("nav-active");
      /*    $("a[href='" + navActiveCurrent + "']").removeClass("nav-active").tooltip('hide');*/
      /*   $(".dotservices li:last-child a").addClass("nav-active").tooltip('show');*/

    }
  }
});

.dotservices {
  width: 40px;
  height: auto;
  padding: 0;
  text-align: center;
  font-weight: bold;
  color: #444;
  text-decoration: none;
  position: fixed;
  top: 20%;
  left: 0.5%;
  display: block;
  z-index:9999;
}
.dotservices li {
  list-style: none;
}

.dotservices a {
  display: block;
  clear: both;
  text-decoration: none;
  font-family: 'FontAwesome';
  font-weight: normal;
  font-style: normal;
  text-align: center;
  font-size: 14px;
  color: #D1A94D;
  line-height: 50px;
  text-decoration: none;
  width: 40px;
}
.dotservices a:before {
  content: "\f111";
}
.dotservices a.nav-active:before {
  content: "\f10c";
  font-size: 18px;
}
.dotservices a:hover {
  text-decoration: none;
}

<link rel="stylesheet" type="text/css" href="http://itracktraining.com/web4/css/tooltip-style.css" />
<link rel="stylesheet" type="text/css" href="http://itracktraining.com/web4/css/tooltipster.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<script src="http://itracktraining.com/web4/js/jquery.js" type="text/javascript"></script>
<script src="http://itracktraining.com/web4/js/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://itracktraining.com/web4/js/jquery.tooltipster.min.js"></script>

<div class="dotservices">
  <ul>
    <li><a href="#services1" class="scroll poptip active" title="3G implementation & integration"></a></li>
    <li><a href="#services2" class="scroll poptip" title="Full Turnkey Solutions"></a></li>
    <li><a href="#services3" class="scroll poptip" title="IBS & Das Solutions"></a></li>
    <li><a href="#services4" class="scroll poptip" title="Spare Parts management Services"></a></li>
    <li><a href="#services5" class="scroll poptip" title="Operation & Maintenances"></a></li>
    <li><a href="#services6" class="scroll poptip" title="Technical Consultancy Services"></a></li>
  </ul>
</div>
<div id="services1" style="background-color:#CCC; display:block; width:100%;">
  <p>services1</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div id="services2" style="background-color:#999; display:block; width:100%;">
  <p>services2</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>

<div id="services3" style="background-color:#006; display:block; width:100%;">
  <p>services3</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div id="services4" style="background-color:#CCC; display:block; width:100%;">
  <p>services4</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div id="services5" style="background-color:#999; display:block; width:100%;">
  <p>services5</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div id="services6" style="background-color:#006; display:block; width:100%;">
  <p>services6</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>

演示链接

http://itracktraining.com/web4/tool.html

Answer 1

试试这个。

jQuery(document).ready(function ($) {
                $(".scroll").click(function (event) {
                    event.preventDefault();
                    $('html,body').animate({scrollTop: $(this.hash).offset().top}, 1000);
                });
            });

            /**
             * This part handles the highlighting functionality.
             * We use the scroll functionality again, some array creation and
             * manipulation, class adding and class removing, and conditional testing
             */
            var aChildren = $(".dotservices li").children(); // find the a children of the list items
            var aArray = []; // create the empty aArray
            for (var i = 0; i < aChildren.length; i++) {
                var aChild = aChildren[i];
                var ahref = $(aChild).attr('href');
                aArray.push(ahref);
            } // this for loop fills the aArray with attribute href values

    // added here tooltip
            $('.poptip').tooltipster({
                position: 'right',
                onlyOne: true
            });

            $(window).scroll(function () {
                var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
                var windowHeight = $(window).height(); // get the height of the window
                var docHeight = $(document).height();

                for (var i = 0; i < aArray.length; i++) {
                    var theID = aArray[i];
                    var divPos = $(theID).offset().top; // get the offset of the div from the top of page
                    var divHeight = $(theID).height(); // get the height of the div in question
//                        if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
                      if (windowPos <= divPos && divPos <= windowPos + (windowHeight/2)) {
                        $("a[href='" + theID + "']").addClass("nav-active popactive");
// removed from here and added above  "$(window).scroll"
//                         $('.poptip').tooltipster({
//                         position: 'right',
//                         onlyOne: true
//                         });
                        $('.popactive').tooltipster('show');


                    } else {
                        $("a[href='" + theID + "']").removeClass("nav-active popactive");
                    }
                }
                if (windowPos + windowHeight == docHeight) {
                    if (!$(".dotservices li:last-child a").hasClass("nav-active")) {
                        var navActiveCurrent = $(".nav-active").attr("href");
                        $("a[href='" + navActiveCurrent + "']").removeClass("nav-active");
                        //    $("a[href='" + navActiveCurrent + "']").removeClass("nav-active").tooltip('hide');
                        //   $(".dotservices li:last-child a").addClass("nav-active").tooltip('show');

                    }
                }
            });

.dotservices {
  width: 40px;
  height: auto;
  padding: 0;
  text-align: center;
  font-weight: bold;
  color: #444;
  text-decoration: none;
  position: fixed;
  top: 20%;
  left: 0.5%;
  display: block;
  z-index:9999;
}
.dotservices li {
  list-style: none;
}

.dotservices a {
  display: block;
  clear: both;
  text-decoration: none;
  font-family: 'FontAwesome';
  font-weight: normal;
  font-style: normal;
  text-align: center;
  font-size: 14px;
  color: #D1A94D;
  line-height: 50px;
  text-decoration: none;
  width: 40px;
}
.dotservices a:before {
  content: "\f111";
}
.dotservices a.nav-active:before {
  content: "\f10c";
  font-size: 18px;
}
.dotservices a:hover {
  text-decoration: none;
}

<link rel="stylesheet" type="text/css" href="http://itracktraining.com/web4/css/tooltip-style.css" />
<link rel="stylesheet" type="text/css" href="http://itracktraining.com/web4/css/tooltipster.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<script src="http://itracktraining.com/web4/js/jquery.js" type="text/javascript"></script>
<script src="http://itracktraining.com/web4/js/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://itracktraining.com/web4/js/jquery.tooltipster.min.js"></script>

<div class="dotservices">
  <ul>
    <li><a href="#services1" class="scroll poptip active" title="3G implementation & integration"></a></li>
    <li><a href="#services2" class="scroll poptip" title="Full Turnkey Solutions"></a></li>
    <li><a href="#services3" class="scroll poptip" title="IBS & Das Solutions"></a></li>
    <li><a href="#services4" class="scroll poptip" title="Spare Parts management Services"></a></li>
    <li><a href="#services5" class="scroll poptip" title="Operation & Maintenances"></a></li>
    <li><a href="#services6" class="scroll poptip" title="Technical Consultancy Services"></a></li>
  </ul>
</div>
<div id="services1" style="background-color:#CCC; display:block; width:100%;">
  <p>services1</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div id="services2" style="background-color:#999; display:block; width:100%;">
  <p>services2</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>

<div id="services3" style="background-color:#006; display:block; width:100%;">
  <p>services3</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div id="services4" style="background-color:#CCC; display:block; width:100%;">
  <p>services4</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div id="services5" style="background-color:#999; display:block; width:100%;">
  <p>services5</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div id="services6" style="background-color:#006; display:block; width:100%;">
  <p>services6</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div>
  <p></p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>