javascript - 当div到达页面一定高度时

Question

我有一个作品集网站 here .

当单击该部分容器的菜单项(例如“联系人”)时，我将菜单设置为滚动。发生这种情况时，左侧的小箭头会移动以显示您在网站中的位置。我的问题是，当用户滚动浏览网站而不单击菜单时，箭头不会更新其位置，因为它仅被编程为在单击菜单按钮时移动。我一直在想一种方法来解决这个问题，我能想到的就是当“contactcontainer”等容器之一位于页面中的某个点时(理想情况是距离页面顶部 20px 时)让箭头更新其位置。这一页)。谁能告诉我一个 javascript 函数，它可以计算页面中 div 相对于顶部的位置，以便我可以编写 jquery 来使箭头移动？

如果有人有更好的方法来完成这项工作，请接受其他建议

Answer 1

!更新:修复 onclick 菜单事件状态

我在这里做了一个简单的scrollSpy演示；

演示:https://jsfiddle.net/yeyene/up4nu/4735/

无需使用 bootstrap 或其他插件。希望您的网站能够与此集成。

JQUERY

// Cache selectors
var lastId,
topMenu = $("#top-menu"),
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function () {
        var item = $($(this).attr("href"));
        if (item.length) {
            return item;
        }
    });

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function (e) {
    e.preventDefault();
    
    var href = $(this).attr("href"),
        offsetTop = href === "#" ? 0 : $(href).offset().top+1;
    $('html, body').stop().animate({
        scrollTop: offsetTop
    }, 300);
});

// Bind to scroll
$(window).scroll(function () {
    // Get container scroll position
    var fromTop = $(this).scrollTop();

    // Get id of current scroll item
    var cur = scrollItems.map(function () {
        if ($(this).offset().top < fromTop) return this;
    });
    // Get the id of the current element
    cur = cur[cur.length - 1];
    var id = cur && cur.length ? cur[0].id : "";

    if (lastId !== id) {
        lastId = id;
        // Set/remove active class
        menuItems.parent().removeClass("active");
        menuItems.filter("[href=#" + id + "]").parent().addClass("active");
    }
});

HTML

<ul id="top-menu">
    <li class="active"><a href="#">Foo</a></li>
    <li><a href="#bar">Bar</a></li>
    <li><a href="#baz">Baz</a></li>
    <li><a href="#car">Car</a></li>
</ul>
<div id="content">
    <div><a id="foo"></a>Foo</div>
    <div><a id="bar"></a>Bar</div>
    <div><a id="baz"></a>Baz</div>
    <div><a id="car"></a>Car</div>
</div>

CSS

body {
    font-family: Helvetica, Arial;
    height:2200px;
}
#top-menu {
    position: fixed;
    z-index: 1;
    background: white;
    left: 0;
    right: 0;
    top: 0;
    width:25%;
    background:yellow;
}
#top-menu li a{
    float: left;
    width:90%;
    border-bottom:3px solid #fff;
    text-align: center;
    background:yellow;
    color: #aaa;
    text-decoration: none;
    padding:5px 5% 7px 5%;
}
#top-menu a:hover {
    color: #000;
}
#top-menu li.active a {
    color: #000;
    background:url('http://iconshow.me/media/images/ui/ios7-icons/png/16/arrow-left-b.png') no-repeat right;
}
#content {
    float:right;
    width:75%;
}
#content div{
    float:left;
    width:100%;
    height:500px;
    background:#dfdfdf;
    border-bottom:2px solid #fff;
}