Question

正如您可以通过单击左侧菜单看到的那样，页面滚动到相关信息，菜单项将其外观更改为白色背景等。

我希望页面检查它的位置，然后分别更新列表中的css，这样如果页面正在查看第二个标题，菜单会将第二个标题css更改为它们点击后的样式它。我知道这很啰嗦，可能没有多大意义，对不起。

以下是我认为它会起作用的方式：

我不知道每页有多少标题（我理论上这样做但是有很多页面，我宁愿有一些动态的东西）。所以我会使用$("h2").length来检查标头数量。然后可能有一个循环来获取每个这些的距离（存储在一个数组？），然后每次窗口滚动，它开始加载或更改大小，一个函数将捕获屏幕的位置，然后更新CSS。如果这就是你要解决的问题，你可以帮助我把它放在一起，如果有另一种更好的方法（可能是因为我没有真正使用javascript）你可以告诉我。

感谢，克里斯

Answer 1

如果您不希望这里的所有内容都是您需要做的事情

http://jsfiddle.net/6t83p/1/花了一些时间，但它总是很有趣：）

    $('.selectedNav').css( 'background-color', 'white');
$('.selectedNav').css( 'border-right', 'none');

$('.servicesNavItem').click(function () {
    $(this).parent().css( 'background-color', 'white');
    $(this).parent().css( 'border-right', 'none');
    $('.selectedNav').css( 'background-color', '#eeeeee');
    $('.selectedNav').css( 'border-right', '1px solid #c7c7c7');
    $('.selectedNav').toggleClass("selectedNav");
    $(this).parent().toggleClass("selectedNav");
});

var y = $('.servicesLeft').offset().top - 50;
    $(window).scroll( function() {
    if ($(window).scrollTop() > y)
        $('.servicesLeft').addClass('floating');
    else
        $('.servicesLeft').removeClass('floating');
    });

$('#sideNav li a').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});
/***** ADDED THE FOLLOWING CODE ******/
// get positions of all linked href
var x = {};
$('#sideNav a').each(function(){
    var href = $(this).attr('href').replace('#','');
    x[href] = $('#'+href).offset().top;
});

$(document).on('scroll', function(){
    var current_top = window.pageYOffset;
    console.log(current_top);
    var active = '';
    var min_value = 9999999;
    $.each(x, function(index, value) { 
         // some big value
        if(value >= current_top && value < min_value)
        {
            console.log(min_value);
            min_value = value;
            active = index;
        }
    });

    $('#sideNav li').removeAttr('style');
    $('#sideNav a[href="#'+active+'"]').parent('li').css({'background-color': 'white', 'border-right-style': 'none'});
});

Answer 2

我想这篇文章会对你有所帮助

jQuery to change content in div based on scroll position

快乐编码：）

根据窗口的位置更改div类

2 个答案: