id基本锚点滚动链接与工具提示

Question

我正在尝试使用id base锚点滚动链接显示工具提示，工具提示将一直有效，直到活动id div，之后它将显示下一个受尊重的链接工具提示

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

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

这是我的代码

＆＃13;

＆＃13;

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');*/

    }
  }
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

演示链接

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

Answer 1

你在window.scroll处理程序中犯了几个错误。

使用以下版本替换您的代码：

<script>
  ...

  var updateToolTips = 
    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 isToolTipShown = false;

      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

        var $link = $("a[href='" + theID + "']");

        if (
          windowPos <= divPos && divPos <= windowPos + windowHeight && // show tooltip when element is displayed in viewport...
          !isToolTipShown // ...but only if previous element does not show a tooltip already
        )
        {
          $link.addClass("nav-active popactive");

          if (!$link.is(".tooltipstered"))
          {
            $link.tooltipster({
              position:'right',
              autoClose: false,
              delay: 0
            });
          }

          $link.tooltipster('show');

          isToolTipShown = true;
        }
        else
        {
          $link.removeClass("nav-active");

          if ($link.is(".tooltipstered"))
            $link.tooltipster('hide');
        }
      }
    };

  $(window).scroll(updateToolTips);
  $(document).ready(updateToolTips);

  ...
</script>

您可以看到代码

1. 使用可重复使用的函数变量
2. 在您第一次访问该页面时更新工具提示
3. 滚动时更新工具提示
4. 仅查询一次链接
5. 通过在这里和那里执行一些健全性检查来修复写入浏览器控制台的大量消息

Answer 2

试试这个。

＆＃13;

＆＃13;

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');

                    }
                }
            });

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;