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

发布于 2024-12-05 19:29:38 字数 1205 浏览 0 评论 0原文

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

-检查当前哪个“.main”可见，并动态地将“.active”添加到“nav”中的相应链接？

问候！

编辑：

我已经使用这个 Viewport 插件和以下代码解决了这个问题：

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

感谢大家的帮助！

原文

I would like to know if its possible with jQuery to do the following:

http://jsfiddle.net/AzFJR/2/

-check which ".main" is visible at the moment and dynamically add ".active" to the corresponding link in the "nav" ?

Regards!

Edit:

I have worked it out using this Viewport Plugin and following code:

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

Thanks every1 for the help!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

动听の歌 2024-12-12 19:29:38

使用 jQuery ELEMENT 'INVIEW' EVENT 插件。

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

Use the jQuery ELEMENT ‘INVIEW’ EVENT plugin.

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

回复收藏 0 原文