Question

因此，不是描述我想要完成的内容，而是example在屏幕的右侧，它们有一个导航，根据您所使用的幻灯片，将更改“活动”导航项。

所以如果我使用position（）函数和子类.top，我想到了这一点。（正如你将在我的代码中看到的，如果我说＆lt; position.top）它可以正常工作，除了它绝对不会让我使用任何条件语句让我比较AGAINST position.top（你将在我的代码中看到）当我尝试执行var＆gt; 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会从绿色变为黑色，所以如果它超出界限自从它变黑以来，div的顶部必须高于875。我没有资源。提前谢谢。

var a = parseInt($(".slide1n").css("top"));

if (a > 0 && a < 875) {
  //this runs
}

if (a > 876) {
  $('body').hide(); //doesnt run this 
}

/ ** 编辑 ***** /

HTML（已请求）

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

LIVE DEMO

Answer 1

我对你的问题采取了一些自由，并决定采用我正常的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);
}));

您可能需要做出一些警告和改进，例如：

当您到达页面底部时，触发“活动”状态最后一项（在较大的屏幕上，有时你不能滚动直到底部元素，但这只是个人偏好。）
在窗口上的'scroll'触发器中添加一个油门/去抖动器（例如 Ben Alman's Throttle/Bebounce jQuery插件）用于表现原因
目前，您必须拥有每个的顶级菜单项如果您希望显示指标，您希望显示“指标” 对于特定的幻灯片

DEMO FIDDLE

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

1 个答案: