Jquery 根据窗口的位置更改div类

以下是我的设置：

单击左侧的菜单可以看到，页面会滚动到相关信息，菜单项会将其外观更改为白色背景等

我希望页面检查它在哪里，然后分别更新列表上的css，这样，如果页面正在查看第二个标题，菜单会将第二个标题的css更改为他们单击它时的样式。我知道这很冗长，可能没有什么意义，我很抱歉

以下是我的想法：

我不知道每页上有多少个标题（理论上我知道，但有很多页，我宁愿有动态的标题）。因此，我将使用

$（“h2”）.length

来检查标题的数量。然后可能有一个循环来获取每个窗口的距离（存储在数组中？），然后每次窗口滚动时，它开始加载或更改大小，一个函数将捕获屏幕的位置，然后更新css。如果这是你将如何解决它，你能帮我把它放在一起，如果有另一个更好的方法（可能是因为我没有真正使用javascript），请你让我知道

谢谢，

---

克里斯

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

---

快乐编码：）

如果你不想从引导中获得一切，那么你需要做的就是

花了一些时间，但总是很有趣：）

$（'.selectedNav'）.css（'background color'，'white'）；
$（'.selectedNav'）.css（'border right'，'none'）；
$（'.servicesNavItem'）。单击（函数（）{
$（this.parent（）.css（'background color'，'white'）；
$（this.parent（）.css（'border right'，'none'）；
$（'.selectedNav'）.css（'background color'，'eeeeee'）；
$（'.selectedNav'）.css（'border right'，'1px solid#c7c7'）；
$（'.selectedNav'）。切换类（“selectedNav”）；
$（this.parent（）.toggleClass（“selectedNav”）；
});
变量y=$（'.servicesLeft'）.offset（）.top-50；
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>y）
$（'.servicesLeft'）.addClass（'floating'）；
其他的
$（'.servicesLeft'）.removeClass（'floating'）；
});
$（'sideNav li a'）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（$.attr（此'href'））.offset（）.top
}, 500);
返回false；
});
/*****添加了以下代码******/
//获取所有链接href的位置
var x={}；
$（'#sideNav a'）。每个（函数（）{
var href=$（this.attr（'href'）.replace（'#'，''）；
x[href]=$（'#'+href）.offset（）.top；
});
$（文档）.on（'scroll'，function（）{
var current_top=window.pageYOffset；
console.log（当前_top）；
var-active=''；
var最小值=999999；
$.each（x，函数（索引，值）{
//一些大的价值
如果（值>=当前值顶部和值<最小值）
{
控制台日志（最小值）；
最小值=最小值；
活动=索引；
}
});
$（'sideNav li'）.removeAttr（'style'）；
$（“#sideNav a[href=”#“+active+”）.parent（'li'）.css（{'background-color'：'white'，'border-right style'：'none'）；
});

您签出引导程序了吗？我没有用过它，但我打算用它，它听起来像是做了一些类似的事情--看左边屏幕上的菜单，它如何变化取决于你在页面上的位置，这就是我想要的效果是的，我只是想用几行代码就可以了，我想可以，我只是太懒了。Bootstraps还提供了大量其他方便的东西，我认为只有一件事需要时刻注意：）很好的代码。。。但是现在导航和活动状态中有一个bug。WBR修复了这个错误：）而不是>做>=那太好了，谢谢！不过有点吹毛求疵，有没有办法让它在窗口的顶部而不是底部注册？i、 当标题第一次出现时css会改变，我宁愿它在屏幕顶部改变？@Rishabh我发现了一个错误，当最后一个项目经过屏幕时，它会改变到列表中的下一个项目，但仅仅因为你看不到标题并不意味着你在下一组数据上。在小提琴中，我把第二段写得很长，当你看完菜单上的第二段时，你可以看到第三段突出显示，有什么想法吗？

    $('.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'});
});