我正在尝试显示带有 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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="services2" style="background-color:#999; display:block; width:100%;">
<p>services2</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="services3" style="background-color:#006; display:block; width:100%;">
<p>services3</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="services4" style="background-color:#CCC; display:block; width:100%;">
<p>services4</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="services5" style="background-color:#999; display:block; width:100%;">
<p>services5</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="services6" style="background-color:#006; display:block; width:100%;">
<p>services6</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>演示链接
最佳答案
试试这个。
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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="services2" style="background-color:#999; display:block; width:100%;">
<p>services2</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="services3" style="background-color:#006; display:block; width:100%;">
<p>services3</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="services4" style="background-color:#CCC; display:block; width:100%;">
<p>services4</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="services5" style="background-color:#999; display:block; width:100%;">
<p>services5</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="services6" style="background-color:#006; display:block; width:100%;">
<p>services6</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div>
<p></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>关于javascript - 带有工具提示的 id base anchor 滚动链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34545805/