3

我想得到一个和这个网站完全一样的导航：http: //www.interviewmagazine.com/

向下滚动约 700 像素左右后会出现一个导航栏。它是一个具有淡入效果的固定导航，当您滚动回顶部时具有淡出效果。

我试图看看他们是如何编写代码的，但无法弄清楚。

听起来像 mootools 吗？

如果有人可以提供帮助，那就太棒了。谢谢！

4

4 回答 4

2

您可以使用 jQuery 和 CSS 创建这样的菜单，在以下情况下根据需要交换类：

var posit = window.scrollTop();
if (posit == [your designated fadein location]) {
    //do something;
}

CSS: position : fixed, opacity : 0, height : 0; overflow : hidden

交换类以将高度更改为固定数量

animate({opacity : 1.0}, 'fast', function() {
    //callback;
});

您必须为用户滚动设置一个侦听器，但这应该可以帮助您入门。您所需要的只是 jQuery 和一个浏览器，一种将项目分割成可管理部分的合乎逻辑的方法和时间。

编辑：这是你的小提琴。

http://jsfiddle.net/lazerblade01/fNn7K/26/

于 2012-04-17T01:58:35.847 回答
2

对于通过 stackoverflow 搜索的任何人，这是我的尝试：

$(function(){
    // Check the initial Poistion of  Sticky Header
    var stickyHeaderTop = $('#stickyheader').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {
                    $('#stickyheader').css({position: 'fixed', top: '0px'});
                    $('#stickyheader').css('opacity', '1');
            } else {
                    $('#stickyheader').css({position: 'static', top: '600px'});
                    $('#stickyheader').css('opacity', '0');
            }
    }); 
 });

这是一个小提琴演示 http://jsfiddle.net/uFq2k/297/

这是这段代码的一个小修改版本：如何在向下滚动一点后粘贴 div

于 2013-09-11T17:50:17.747 回答
1

David Walsh 有一个他称之为 ScrollSpy 的东西——很像 twitter 的滚动间谍——只是它做了不同的事情。

推特可以对进入视野的特定兴趣元素做出反应。

walsh 的插件可以在用户滚动到特定阈值并返回时做出反应并为您提供事件。

http://davidwalsh.name/mootools-scrollspy

于 2012-04-19T08:26:22.743 回答
0

你可以试试Twitter 的 Bootstrap。查看他们的第二个工具栏。

于 2012-04-17T01:52:14.160 回答