0

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

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

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

谢谢，J

4

1 回答 1

0

这主要取决于您的 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') - 隐藏的侧边菜单会显示您的位置。

于 2013-10-30T05:25:11.710 回答