2

这是我的设置：http: //jsfiddle.net/REGUs/

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

我希望页面检查它的位置，然后分别更新列表上的 css，以便如果页面正在查看第二个标题，菜单会将第二个标题 css 更改为他们单击它时的样式。我知道这很罗嗦，可能没有多大意义，我很抱歉。

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

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

谢谢，克里斯

4

2 回答 2

2

如果您不想要 bootstrap 中的所有内容，这就是您需要做的

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'});
});
于 2013-04-04T12:42:44.157 回答
1

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

jQuery根据滚动位置更改div中的内容

快乐编码:)

于 2013-04-04T12:20:31.710 回答