Question

我有一个投资组合网站here。

我有一个菜单设置，当菜单项如＆＃34;联系＆＃34;单击该部分容器。当发生这种情况时，左侧的小箭头会移动以显示您所在站点的位置。我的问题是当用户在没有点击菜单的情况下滚动浏览网站时箭头没有更新其位置，因为它仅被编程为在点击菜单按钮时移动。我一直在想办法解决这个问题，而我所能想到的就是让箭头在其中一个容器（例如＆＃34; contactcontainer＆＃34;是在页面中的某个点（理想情况下，当它从页面顶部20px时）。任何人都可以告诉我一个javascript函数，它可以计算div中与div相关的位置，所以我可以编写jquery来使箭头移动吗？

如果有人有更好的方法来开展此项工作，请提供其他建议

Answer 1

！更新：修复onclick菜单活动状态

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

DEMO：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;
}

Answer 2

尝试

$('.arrow-up-cover').offset();

使用箭头作为示例元素。

编辑：

.offset()返回相对于文档的元素位置。然后，您可以将函数挂钩到滚动事件，并使用类似$(window).scrollTop()的内容来跟踪窗口移动时的顶部。您只需将.offset()与.scrollTop()进行比较即可知道何时移动箭头。

Answer 3

你可以在js函数中执行此操作

params  = 'width='+screen.width;
params += ', height='+screen.height;
params += ', top=0, left=0';
params +=', scrollbars=yes,menubar=yes,toolbar=yes';

Answer 4

我不知道你是否愿意，但是，你可以使用bootstrap“Scroll Spy”实用程序。如果您想了解更多，请转到这里！：

http://getbootstrap.com/javascript/#scrollspy

当div达到页面

4 个答案:

！更新：修复onclick菜单活动状态

DEMO：https://jsfiddle.net/yeyene/up4nu/4735/

JQUERY

HTML

CSS