Блог

Главная - Вопросы по программированию - jQuery / HTML5 временная шкала Facebook похожа на липкие заголовки

jQuery / HTML5 временная шкала Facebook похожа на липкие заголовки

#javascript #jquery #html #header #sticky

#javascript #jquery #HTML #заголовок #липкий

Вопрос:

Я видел липкие заголовки, реализованные во многих разных местах, самый последний из которых — в функции временной шкалы Facebook. Я работаю над своим бизнес-сайтом и хотел бы реализовать ту же функциональность. Если вы все еще не совсем понимаете, о чем я говорю, вы можете перейти к http://www.facebook.com/timeline и прокрутите страницу вниз.

Я знаю, как делать фиксированные заголовки, но я хочу, чтобы они оставались вверху, как только они покидают видимую область страницы, а затем исчезали, как только я перехожу к следующему.

Если кто-нибудь может помочь или указать мне на статью, которая помогла бы, я был бы очень признателен. (Да, я сначала сделал это в Google.

Редактировать

Вот код, который у меня есть сейчас:

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>

Ответ №1:

Вот что-то похожее, где новый заголовок заменяет старый при прокрутке. Это должно помочь вам начать на правильном пути к созданию собственного решения:

Демонстрация: http://jsfiddle.net/AlienWebguy/mvtP7/1 /

jQuery:

 $(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;
}

Комментарии:

1. Большое спасибо! Еще одна вещь: где лучшее место или есть ли оно, для размещения вашего кода jQuery. Я видел, что в нем говорилось, что он должен находиться где-то между тегами head, но я только что создал веб-сайт, где весь мой код jQuery находился непосредственно перед закрывающим тегом body, и это казалось просто прекрасным.

2. Добро пожаловать! Я думаю, что лучше всего поместить его в свой собственный файл. Что-то называется scripts.js или common.js . Тогда — самый оптимальный (с точки зрения производительности) способ включить ваш JS — отложить загрузку JS и включить его в JS 🙂 code.google.com/speed/page-speed/docs /…

3. Хорошо, я не могу заставить это работать. Я немного изменил его, чтобы он соответствовал моему сайту, но он не добавляет класс, исправленный в мои заголовки. Публикация кода.

4. Я не вижу .fixed css в вашем новом редактировании: .fixed{position:fixed;}

5. Он у меня есть, просто забыл его добавить.

Ответ №2:

Если вы обнаружите, что оглядываетесь назад на этот вопрос, возможно, вы захотите переписать его, используя my library Balloon . Замена липких заголовков такова, что она не привязывается (как это происходит в примере AlienWebguy), если это было то, к чему вы стремились. Интеграция с Balloon должна быть действительно простой, а README довольно тщательный. Вы также можете сложить заголовки, если хотите. Дайте мне знать, если это помогло.

https://github.com/vhiremath4/Balloon

Ответ №3:

Используйте путевые точки jquery. У него есть «липкий» плагин / ярлык, который работает как шарм. Просто будьте осторожны, я недавно использовал его в проекте, и у меня были проблемы с динамической загрузкой контента. Хитрость заключается в том, чтобы добавить путевые точки к элементам, которые в конечном итоге не будут липкими, чтобы пересчет путевых точек не был испорчен элементами с фиксированными путевыми точками css.

Ответ №4:

Я считаю, что этот плагин jQuery — это то, что вы ищете:

https://github.com/bigspotteddog/ScrollToFixed

Вы можете увидеть демонстрацию этого здесь: http://bigspotteddog.github.io/ScrollToFixed /

В частности, обратите внимание на то, как работают элементы на боковой панели.