Question

有人可以把我从我的痛苦中解救出来并修复＆＃39;或者解决＆＃39;我的问题：你可以通过我的JSfiddle链接看到

jQuery(document).ready(function ($) {
    var h = $("#main-menu").height() * 1.25;
    $(".scroll").click(function (event) {
        event.preventDefault();
        $('html,body').animate({
            scrollTop: $(this.hash).offset().top - h
        }, 300);
    });

我似乎无法让它发挥作用 - 我想要做的就是更改链接文本的颜色，以确定用户所在页面的哪个部分。请帮我？

提前致谢

Answer 1

更新：在滚动

上选择菜单项

[ UPDATED ] jsFiddle：http://jsfiddle.net/thecbuilder/Qtjx6/2/

添加了js

$(window).scroll(function () {
        // Get container scroll position
        var topHeight = $(this).scrollTop() + h + 10;
        var onTopId;
        $(".testx").each(function () {
            var curTop = $(this).offset().top;
            var curBottom = curTop + $(this).height();

            if (curTop < fromTop && curBottom > topHeight) {
                onTopId = $(this).attr("id");
            }
        });
        $selLink.removeClass("selected");
        $selLink = $("a[href=#"+onTopId+"]").addClass("selected");
    });

这应该完成任务：http://jsfiddle.net/thecbuilder/Qtjx6/

<强> JS

var $selLink = $("ul li a"); 
$(function(){
    $("ul li a").click(function(){
        $selLink.removeClass("selected");
        $selLink = $(this);
        $selLink.addClass("selected");
    });
});

<强> CSS

.selected{
    color : #4B85C3;
}

Answer 2

您正在检查链接的偏移量而不是内容部分。工作小提琴：

http://jsfiddle.net/SJkmh/315/

$(document).scroll(function () {

    var h = $("#main-menu").height() * 1.5;
    var link1 = $("#home").offset().top;
    var link2 = $("#about").offset().top;
    var link3 = $("#work").offset().top;
    var selectedColor = "#4B85C3";
    var defaultColor = "#2e375b";
    var top = $(this).scrollTop() - h;
    $("#main-menu li a").css('color', defaultColor);    

    if (top <= link1) {
        $("#link1").css('color', selectedColor);
    } else if (top <= link2) {
        $("#link2").css('color', selectedColor);
    } else {
        $("#link3").css('color', selectedColor);
    }

});

Answer 3

执行此操作的方法是重置所有链接的颜色，然后将$（this）的颜色设置为新颜色

jQuery(document).ready(function ($) {
    var h = $("#main-menu").height() * 1.25;
    $(".scroll").click(function (event) {
        $('a.scroll').css({"color": "#2e375b"});
        $(this).css({"color": "#4B85C3"});
        event.preventDefault();
        $('html,body').animate({
            scrollTop: $(this.hash).offset().top - h
        }, 300);
    });
});

JSFiddle

滚动到锚点时更改链接属性

3 个答案: