根据y的位置设置导航激活

Question

所以，而不是描述我想要完成的，这里有一个例子，在屏幕的右侧，他们有一个导航，根据你在哪个幻灯片上，将改变"活动"导航项。

所以我已经弄清楚了，如果我使用position()函数和子类。top。(正如您将在我的代码中看到的，如果我输入<position.top)，除了它绝对不允许我使用任何条件语句来比较position。top(正如你将在我的代码中看到的，当我尝试执行var> position.top时，我的第二个条件语句没有运行)。

我希望有人能给我一些建议，如果我能做到这一点，如果是这样或其他的。

$.fn.followTo = function ( pos ) {
    var $this = this,
        $window = $(windw);
    $window.scroll(function(e){
        if ($this.hasClass("green"))
    {
          if ($window.scrollTop() < pos) {
        $this.css({
            background: 'green'
        });
        } else {
        $this.css({
            background: 'black'
        });
        }
    }

    });
};
var a = $(".slide1n");
var Aposition = a.position();
if(Aposition.top < 875)
{
  //this runs
  $('.slide1n').addClass('green');
  $('.slide1n').followTo(875);
}
if(Aposition.top > 875)
{
  //this doesnt run
  $('.slide1n').removeClass('green');
  $('.slide2n').addClass('green');
  $('.slide2n').followTo(1550);
}

我也试过别的东西我发现,仍不工作(在我发布这个问题之前,我回到谷歌和其他搜索和发现一个不同的方式,它仍然不工作)这只是对我不理解,因为如果前两个语句(我试过两种不同的时间)正常工作如果不到这么多,和我followTo函数,div从绿色变为黑色的越界,因此，如果它超出边界，div的顶部必须高于875，因为它变成了黑色。我没有资源了。提前谢谢。

var a = parseInt($(".slide1n").css("top"));
if (a > 0 && a < 875) {
  //this runs
}
if (a > 876) {
  $('body').hide(); //doesnt run this 
}

/** EDITS *****/

HTML(已被请求)

  <div class="slide1n"></div>
  <div class="slide2n"></div>
  <div class="slide3n"></div>
  <div class="slide4n"></div>
  <div class="slide5n"></div>

现场演示

Answer 1

我对你的问题采取了一些自由，并决定使用我通常使用的scrollspy的JS解决方案。

($(function(){
    // create a cache of used elements
    var $els = [];
    $els.nav = $('#nav');
    $els.header = $('#header');
    $els.window = $(window);
    $els.indicators = $('.indicators');
    var lastId,
    headerHeight = $els.header.outerHeight(),
    // All list items
    menuItems = $els.nav.find('a'),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
        var item = $($(this).attr('href'));
        if (item.length) { return item; }
    });
    // fancy scroll over time to anchor
    function scrollTo(e) {
        e.preventDefault();
        var target = $(this).attr('href');
        var topDistance = $(target).offset().top + headerHeight;
        menuItems.parent().find('.active').removeClass('active');
        $(this).parent().addClass('active');
        // need to trigger this on both as browsers differ from one another
        $('body, html').animate({scrollTop: topDistance + 'px'}, 200);
    }
    function checkAnchorUpdate(){
        // Return a list of elements above of at where we are scrolled to
        var cur = scrollItems.map(function(){
            if ($(this).offset().top <= $els.window.scrollTop() - headerHeight){
                return this;
            }
        });
        // Get the last element in the returned list
        cur = cur[cur.length-1];
        // get element's id attribute, default to 'slide1'
        var id = cur && cur.length ? cur[0].id : "slide1";
        // stops us triggering the active states again and again
        if (lastId !== id) {
            lastId = id;
            // Set/remove active class
            $els.indicators.removeClass('active');
            $('#'+id+'n').addClass('active');
            menuItems
            .parent().removeClass("active")
            .end().filter("[href="#"+id+""]").parent().addClass("active");
        }  
    }
    $els.window.on('scroll', checkAnchorUpdate);
    menuItems.on('click', scrollTo);
}));

有一些需要注意和改进的地方，例如:

• 当你到达页面底部触发'active'状态on最后一项(在较大的屏幕上)有时你无法滚动
• 为窗口上的"滚动"触发器添加一个油门/反调器(如Ben Alman的节流/Bebounce jQuery插件)的性能
• 目前你必须有一个顶部菜单项的每一个如果你想让指示器显示，你想让它可见

演示小提琴