使用CSS / jQuery滚动时如何设置聚焦和访问锚点的样式

我有一个相当复杂的问题，我似乎无法回答自己。

在我的页面顶部，我有几个平滑向下滚动到文章的锚点：

我想通过旋转箭头告诉访问者他们在页面上的位置。 此箭头应指向它所代表的文章。 在下一个图像中，您可以看到我想如何实现它。 在这里，用户滚动过锚1（这是一篇动态高度的文章），现在正在阅读第2篇文章：

当访问者在文章之外，但是锚3文章仍然在滚动位置之下时，它应该如下所示：

这给我带来了一些问题：

1. 是否可以编写jQuery脚本以便动态添加锚点？
2. 如何在不添加额外库的情况下添加旋转动画？ （我现在正在使用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 = bodyHt ) ) ){ $('#navTopBar .anchor img') .removeClass('open') .eq(i).addClass('open'); } }) }) }) 

提前致谢！

Answer 1

我认为代码看起来很熟悉;）

试试这样的东西（ 演示 ）

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的插件; 它不包括这些更改 – 将类添加到所选的上方和下方的链接，但在回调函数中添加它应该相对容易。