我有一个相当复杂的问题,我自己似乎无法回答。
在我的页面顶部,我有几个 anchor 可以平滑向下滚动到一篇文章:
我想通过旋转箭头告诉访问者他们在页面上的位置。此箭头应指向它所代表的文章。在下一张图片中,您可以看到我想如何实现它。在这里,用户已经滚动过 anchor 1(这是一篇具有动态高度的文章),现在正在阅读 anchor 2 的文章:
当访问者在文章外面,但anchor 3文章还在滚动位置下方时,应该是这样的:
这给我带来了一些问题:
- 是否可以编写 jQuery 脚本以便动态添加 anchor ?
- 如何在不添加额外库的情况下添加旋转动画? (我现在正在使用 jquery.transit )
当前代码:(从另一篇文章中获取:jsfiddle.net/m2zQE)
var topRange = 200, // measure from the top of the viewport to X pixels down
edgeMargin = 20, // margin above the top or margin from the end of the page
animationTime = 1200, // time in milliseconds
contentTop = [];
$(document).ready(function(){
// Stop animated scroll if the user does something
$('html,body').bind('scroll mousedown DOMMouseScroll mousewheel keyup', function(e){
if ( e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel' ){
$('html,body').stop();
}
})
// Set up content an array of locations
$('#navTopBar').find('a').each(function(){
contentTop.push( $( $(this).attr('href') ).offset().top );
})
// Animate menu scroll to content
$('#navTopBar').find('a').click(function(){
var sel = this,
newTop = Math.min( contentTop[ $('#navTopBar a').index( $(this) ) ], $(document).height() - $(window).height() ); // get content top or top position if at the document bottom
$('html,body').stop().animate({ 'scrollTop' : newTop }, animationTime, function(){
window.location.hash = $(sel).attr('href');
});
return false;
})
// rotate arrow
$(window).scroll(function(){
var winTop = $(window).scrollTop(),
bodyHt = $(document).height(),
vpHt = $(window).height() + edgeMargin; // viewport height + margin
$.each( contentTop, function(i,loc){
if ( ( loc > winTop - edgeMargin && ( loc < winTop + topRange || ( winTop + vpHt ) >= bodyHt ) ) ){
$('#navTopBar .anchor img')
.removeClass('open')
.eq(i).addClass('open');
}
})
})
})
提前致谢!
最佳答案
我认为代码看起来很熟悉;)
尝试这样的事情(demo)
CSS
li.selected a:after { content :' \2192' }
li.above a:after { content :' \2191' }
li.below a:after { content :' \2193' }
脚本
var topRange = 200, // measure from the top of the viewport to X pixels down
edgeMargin = 20, // margin above the top or margin from the end of the page
animationTime = 1200, // time in milliseconds
contentTop = [];
$(document).ready(function () {
var $menu = $('#sidemenu li'),
updateArrows = function (sel) {
var indx = $menu.filter('.selected').index();
$menu
.filter(':lt(' + indx + ')').removeClass('below').addClass('above').end()
.filter(':gt(' + indx + ')').removeClass('above').addClass('below');
};
// Stop animated scroll if the user does something
$('html,body').bind('scroll mousedown DOMMouseScroll mousewheel keyup', function (e) {
if (e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel') {
$('html,body').stop();
}
});
// Set up content an array of locations
$menu.find('a').each(function () {
contentTop.push($($(this).attr('href')).offset().top);
});
// Animate menu scroll to content
$menu.find('a').click(function () {
var sel = this,
newTop = Math.min(contentTop[$('#sidemenu a').index($(this))], $(document).height() - $(window).height()); // get content top or top position if at the document bottom
$('html,body').stop().animate({
'scrollTop': newTop
}, animationTime, function () {
window.location.hash = $(sel).attr('href');
updateArrows();
});
return false;
});
// adjust side menu
$(window).scroll(function () {
var sel,
winTop = $(window).scrollTop(),
bodyHt = $(document).height(),
vpHt = $(window).height() + edgeMargin; // viewport height + margin
$.each(contentTop, function (i, loc) {
if ((loc > winTop - edgeMargin && (loc < winTop + topRange || (winTop + vpHt) >= bodyHt))) {
$menu.removeClass('selected')
.eq(i).removeClass('above below').addClass('selected');
} else {
updateArrows();
}
});
});
updateArrows();
});
如果您有兴趣,我实际上将该代码变成了一个名为 visualNav 的插件。 ;它不包括这些更改 - 将类添加到所选链接上方和下方的链接,但在回调函数中添加应该相对容易。
关于jquery - 使用 CSS/jQuery 滚动时如何设置焦点和访问 anchor 的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25711004/