javascript 菜单 redfin 滚动答案

【问题标题】：javascript menu redfin scrolljavascript 菜单 redfin 滚动
【发布时间】：2013-10-30 05:02:49
【问题描述】：

我有一个很长的网页，其中包含多个可以从顶部导航栏链接到的锚标记。当用户滚动时，该栏会自行固定在屏幕顶部。我想要一个小图标，当用户向下滚动页面（指示你在哪里）时，它会沿着导航水平移动......我正在寻找的功能在 redfin.com 的以下链接......

http://www.redfin.com/IL/Chicago/401-N-Wabash-Ave-60611/unit-89A/home/40378913

请注意，当您开始滚动顶部的菜单修复时（我已经构建并运行了该菜单），并且通过单击该导航中的链接，它会自动滚动到页面上的锚点（我也有此功能）。显示您所在位置的红色小三角形是我想做的。老实说，我什至不确定从哪里开始解决这个问题。任何建议或示例代码将不胜感激。一旦我弄清楚了，我会在这里发布最终产品的模拟版本。

谢谢，J

【问题讨论】：

这里是开始使用 jQuery 的地方，但您应该尝试一些代码并将其添加到您的答案中。 $(window).scrollTop() 会给你一个 y 滚动值。 $(sectionDiv).offset().top 将告诉您每个部分在页面下方的位置。 $(sectionDiv).height() 将给出该元素的高度。您将使用绝对定位来定位箭头，其余的主要是在 onScroll 处理程序中进行正确的算术。

标签： javascript jquery css menu jquery-animate

【解决方案1】：

这主要取决于您的 HTML 以及锚点的位置。在我的例子中，我在文本和隐藏的侧边菜单中有锚点，当锚点位于屏幕中间时，它会被动画化。这是我的代码。

$('.hiding').each( function(i){
        var bottom_of_window = $(window).scrollTop() + $(window).height()/2;
        if(bottom_of_window > $(this).position().top && $(this).position().top > 0 ){
            var txt = $(this).children('h1').text();
            $('.sideBar a').each(function() {
                if ($(this).text() == txt){
                    $(this).css('font-weight', 'bolder');
                    $(this).parent().css({
                            'left': '-1em',
                            'background-color': '#FC9',
                            'opacity': '0.6'
                            });
                    } else {
                        $(this).css('font-weight', 'normal');
                        $(this).parent().css({
                            'left': '-2em',
                            'background-color': '#fff',
                            'opacity': '1'
                            });
                        }
                    });
        } 

    });

在此代码中，$('.hiding') 是您的锚点，而 $('.sideBar a') - 隐藏的侧边菜单会显示您的位置。

【讨论】：