2

我已经看到在许多不同的地方实现了粘性标题,其中最新的是在 Facebook 的时间线功能中。我正在我的商业网站上工作,并希望实现相同的功能。如果您仍然不太清楚我在说什么,您可以访问http://www.facebook.com/timeline并向下滚动页面。

我知道如何做固定标题,但我希望它在离开页面的可见区域后立即粘在顶部,然后在我到达下一个时消失。

如果有人能够提供帮助,或者将我指向一篇对我有帮助的文章,我将不胜感激。(是的,我先用谷歌搜索了这个。

编辑

这是我现在拥有的代码:

jQuery

$(function(){
    var lastScrollTop = 0;
    $(window).scroll(function(event){
       var currentScrollTop = $(this).scrollTop();
       if (currentScrollTop > lastScrollTop){
           console.log('scrolling down');
            $('.sticky').each(function(){
                if($(this).hasClass('fixed'))
                { 
                    var _next_header = $(this).nextUntil('.sticky').next('.sticky');
                    if($(_next_header).length > 0)
                    {
                        if(($(this).offset().top + $(this).height()) >= $(_next_header).offset().top)
                        {
                            // Bottom of header hit top of next header
                            $(this).removeClass('fixed').addClass('relative');
                            $(_next_header).removeClass('relative').addClass('fixed');
                        }
                    }
                }
            }); 
        } 
        else 
        {
            // Scrolling up
            $('.sticky').each(function(){
                if($(this).hasClass('fixed'))
                { 
                    var _prev_header = $(this).prevUntil('.sticky').prev('.sticky');
                    if($(_prev_header ).length > 0)
                    {
                        if($(this).offset().top <= ($('#' + $(_prev_header).attr('id') + '_content').offset().top + $(this).height()))
                        {
                            // Top of header hit bottom of previous content box
                            $(this).removeClass('fixed').addClass('relative');
                            $(_prev_header).removeClass('relative').addClass('fixed');
                        }
                    }
                }
            }); 
        }
        lastScrollTop = currentScrollTop;
    });
});

CSS

h1.sticky {
    font-family: 'Poller One', cursive;
    font-size: 2em;
    color: #555;
    margin: 20px 0;
    top: 0;
    left: 0;
}
.fixed {
    position:fixed;
}
.relative {
    position: relative;
}

HTML

<div id="content">

<div class="section">
<h1 class="sticky">WattzUp Web Design</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis quam in nisi suscipit elementum. Curabitur hendrerit lorem non elit ornare vitae egestas tellus viverra. Nulla facilisi. Proin molestie accumsan varius. Quisque tincidunt consectetur ligula, a ornare magna volutpat nec. Aenean tristique adipiscing nisl laoreet commodo. Etiam lobortis varius sapien sit amet facilisis. Nullam ac imperdiet enim. Nunc non arcu dolor.
</div>
<div class="section">
<h1 class="sticky">About</h1>
Aliquam non mauris sit amet nibh mollis tempor. Phasellus ut ante nisl, et facilisis sapien. Sed sit amet turpis nulla, laoreet elementum erat. Integer posuere semper dignissim. Mauris sit amet lacinia purus. Donec consectetur laoreet enim, in vehicula turpis dapibus eu. Nam rhoncus urna id libero molestie et adipiscing velit adipiscing. Nunc vel tortor felis. Praesent vitae purus vitae mauris aliquam condimentum nec ac arcu. Vivamus turpis orci, porta gravida pulvinar ac, vehicula in nunc. Nam in elementum lacus.
</div>
<div class="section">
<h1 class="sticky">Technologies</h1>
Quisque non massa mi, ut vulputate nulla. Donec interdum justo non est facilisis ac gravida mi lacinia. Suspendisse tincidunt adipiscing tortor non mattis. Integer nec lacus lacus, non commodo lorem. Etiam faucibus, risus ut molestie malesuada, justo tellus tempus felis, a viverra ligula lectus quis massa. Nulla vel nisi sed mauris tincidunt gravida. Vestibulum venenatis, massa vitae congue volutpat, enim arcu varius sapien, ut pulvinar nulla mauris eget tortor. In at magna in quam feugiat fringilla. Aliquam erat volutpat. Nulla lectus nisl, laoreet eget hendrerit eget, porta ac odio. Etiam dignissim vehicula rutrum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec dictum malesuada libero eget auctor. Nulla felis neque, posuere vitae rutrum vitae, rutrum quis ipsum.
</div>
<div class="section">
<h1 class="sticky">Projects</h1>
Aliquam mauris eros, volutpat eu pretium in, scelerisque eget augue. Sed blandit adipiscing lacus quis sagittis. Donec vulputate aliquet erat nec vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat mauris at tortor blandit eu venenatis nibh porttitor. Mauris auctor quam et quam varius laoreet. Pellentesque nisi quam, venenatis vel vehicula nec, gravida at leo.
</div>
<div class="section">
<h1 class="sticky">Testimonials</h1>
Suspendisse pharetra nunc quis eros scelerisque at posuere quam vestibulum. Nullam et diam id eros vestibulum aliquam. Sed et est arcu. Praesent vehicula vulputate leo, eget fermentum purus suscipit sed. Donec erat leo, pulvinar quis dapibus id, adipiscing quis nibh. Quisque in odio vel nibh facilisis congue at vitae dolor. Praesent non augue libero, laoreet viverra lacus. Cras vitae est quis massa suscipit egestas in ac arcu. Morbi ut justo sit amet mauris commodo bibendum ac sed turpis. Nullam at nisi quam, id convallis dui.
</div>


</div>
4

4 回答 4

3

这是类似的东西,新标题会在您滚动时替换旧标题。它应该让您开始创建自定义解决方案的正确轨道:

演示:http: //jsfiddle.net/AlienWebguy/mvtP7/1/

查询

$(function(){
    var lastScrollTop = 0;
    $(window).scroll(function(event){
       var currentScrollTop = $(this).scrollTop();
       if (currentScrollTop > lastScrollTop){
           console.log('scrolling down');
            $('.header').each(function(){
                if($(this).hasClass('fixed'))
                { 
                    var _next_header = $(this).nextUntil('.header').next('.header');
                    if($(_next_header).length > 0)
                    {
                        if(($(this).offset().top + $(this).height()) >= $(_next_header).offset().top)
                        {
                            // Bottom of header hit top of next header
                            $(this).removeClass('fixed').addClass('relative');
                            $(_next_header).removeClass('relative').addClass('fixed');
                        }
                    }
                }
            }); 
        } 
        else 
        {
            // Scrolling up
            $('.header').each(function(){
                if($(this).hasClass('fixed'))
                { 
                    var _prev_header = $(this).prevUntil('.header').prev('.header');
                    if($(_prev_header ).length > 0)
                    {
                        if($(this).offset().top <= ($('#' + $(_prev_header).attr('id') + '_content').offset().top + $(this).height()))
                        {
                            // Top of header hit bottom of previous content box
                            $(this).removeClass('fixed').addClass('relative');
                            $(_prev_header).removeClass('relative').addClass('fixed');
                        }
                    }
                }
            }); 
        }
        lastScrollTop = currentScrollTop;
    });
});

CSS

.header {
    background-color:#CCC;
    width:100%;
    top:0;
    left:0;
}

.header h2 {
    margin:20px;
}

.fixed {
    position:fixed;
}
于 2011-10-09T03:28:31.450 回答
0

我相信这个 jQuery 插件就是你要找的:

https://github.com/bigspotteddog/ScrollToFixed

你可以在这里看到它的演示:http: //bigspotteddog.github.io/ScrollToFixed/

特别要注意侧边栏中的元素是如何工作的。

于 2013-09-10T02:49:55.287 回答
0

如果您发现自己回顾这个问题,您可能想使用我的库 Balloon 重写它。粘性标题的替换是这样的,它不会捕捉(就像它在 ALienWebguy 的示例中所做的那样),如果那是你想要的。它应该很容易与 Balloon 集成,并且 README 非常详尽。如果您愿意,您也可以堆叠标题。让我知道这是否有帮助。

https://github.com/vhiremath4/Balloon

于 2012-10-24T09:13:26.227 回答
0

使用jquery 航点。它有一个“粘性”插件/快捷方式,就像一个魅力。请注意,我最近在一个项目中使用了它,并且在动态内容加载方面遇到了问题。诀窍是将航点添加到最终不会粘的元素中,这样航点的重新计算就不会与 css 固定航点元素混淆。

于 2013-07-06T07:30:50.603 回答