Question

我想知道jQuery是否可以执行以下操作：

- 检查“.main”目前是否可见并动态地将“.active”添加到“nav”中的相应链接？

问候！

编辑：

我使用此Viewport Plugin并使用以下代码进行了解决：

//find what element is in view
var inview = '#' + $('.sectionSelector:in-viewport:first').attr('id'),

//find the corresponding link
$link = $('.mainNav li a').filter('[hash=' + inview + ']');

//check i its already active or not and if not
if ($link.length && !$link.is('.active')) {

    //remove all previous active links and make the current one active
    $('.mainNav li a').removeClass('active');
    $link.addClass('active');    

}

//Start same proccess on every scroll event again
$(window).scroll(function () {
    var inview = '#' + $('.sectionSelector:in-viewport:first').attr('id'),
    $link = $('.mainNav li a').filter('[hash=' + inview + ']');
    if ($link.length && !$link.is('.active')) {
        $('.mainNav li a').removeClass('active');
        $link.addClass('active');    
    }
});

感谢every1的帮助！

Answer 1

使用jQuery ELEMENT ‘INVIEW’ EVENT plugin。

$('div').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
  if (isInView) {
    // find link and addClass '.active'
  } else {
    // remove the class
  }
});

Answer 2

scrollTo插件应该可以使用http://flesler.blogspot.com/2007/10/jqueryscrollto.html

jquery +滚动+检查哪些元素可见

2 个答案: